import React from 'react';
import { StyleSheet } from 'react-native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

import { ScreenShell } from '../../../components';
import { useAppSelector } from '../../../app/hooks';
import { FeatureKey } from '../../../constants/featureKeys';
import { useFeature } from '../../../features';
import type { ServicesStackParamList } from '../../../navigation/types';
import { TpinResetFlow } from '../../payments/components/TpinResetFlow';

type Props = Readonly<NativeStackScreenProps<ServicesStackParamList, 'ResetTpin'>>;

/**
 * Resets a forgotten transaction PIN, from the service desk.
 *
 * The signed-in session stands in for the MPIN that creating a TPIN asks for;
 * the bank re-verifies the customer and an OTP to the registered mobile is the
 * second factor.
 */
export default function ResetTpinScreen({ navigation }: Props) {
  const session = useAppSelector((state) => state.auth.session);
  const lastProfile = useAppSelector((state) => state.auth.lastProfile);
  // Create TPIN is offered on TPIN_NOT_SET only where its route exists.
  const canCreateTpin = useFeature(FeatureKey.SERVICES_TPIN_CHANGE);

  return (
    <ScreenShell
      title="Reset TPIN"
      subtitle="Set a new PIN for authorising fund transfers"
      contentContainerStyle={styles.container}
    >
      <TpinResetFlow
        mobileNumber={session?.mobileNumber ?? lastProfile?.mobileNumber}
        onSuccess={() => navigation.goBack()}
        onExit={() => navigation.goBack()}
        onCreateTpin={canCreateTpin ? () => navigation.replace('SetTpin') : undefined}
      />
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    flexGrow: 1,
  },
});