import React from 'react';
import { View, StyleSheet, Keyboard } from 'react-native';
import { useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';
import KeyboardView from '../../components/views/KeyboardView';
import FauxHeader from '../../components/misc/FauxHeader';
import SafeAreaModal from '../../components/modals/SafeAreaModal';
import AlertModal from '../../components/modals/AlertModal';
import PINScreenTitleText from '../../components/misc/PINScreenTitleText';
import PINInput from '../../components/inputs/PINInput';
import usePreventScreenCapture from '../../hooks/screen-capture';
import { useAnimatedComponents } from '../../contexts/animated-components';
import { usePINValidation } from '../../hooks/usePINValidation';
import { useTheme } from '../../contexts/theme';
import { TOKENS, useServices } from '../../container-api';
import { testIdWithKey } from '../../utils/testable';
export let ConfirmPINModalUsage = /*#__PURE__*/function (ConfirmPINModalUsage) {
  ConfirmPINModalUsage[ConfirmPINModalUsage["PIN_CREATE"] = 0] = "PIN_CREATE";
  ConfirmPINModalUsage[ConfirmPINModalUsage["PIN_CHANGE"] = 1] = "PIN_CHANGE";
  return ConfirmPINModalUsage;
}({});
const ConfirmPINModal = ({
  errorMessage,
  modalUsage = ConfirmPINModalUsage.PIN_CREATE,
  onBackPressed = () => {},
  onConfirmPIN = () => {},
  PINOne = '',
  title = '',
  visible = false,
  isLoading = false
}) => {
  const {
    ColorPalette,
    NavigationTheme
  } = useTheme();
  const [PINTwo, setPINTwo] = useState('');
  const {
    t
  } = useTranslation();
  const [PINHeader, {
    preventScreenCapture
  }] = useServices([TOKENS.COMPONENT_PIN_HEADER, TOKENS.CONFIG]);
  usePreventScreenCapture(preventScreenCapture);
  const {
    modalState
  } = usePINValidation(PINOne, PINTwo);
  const {
    LoadingSpinner
  } = useAnimatedComponents();
  const style = StyleSheet.create({
    container: {
      flex: 1,
      padding: 20,
      backgroundColor: ColorPalette.brand.primaryBackground
    },
    loadingContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: 1
    }
  });
  return /*#__PURE__*/React.createElement(SafeAreaModal, {
    style: {
      backgroundColor: ColorPalette.brand.primaryBackground
    },
    visible: visible,
    transparent: false,
    animationType: 'none',
    presentationStyle: 'fullScreen',
    statusBarTranslucent: true
  }, /*#__PURE__*/React.createElement(SafeAreaView, {
    edges: ['top'],
    style: {
      backgroundColor: NavigationTheme.colors.primary
    }
  }), /*#__PURE__*/React.createElement(FauxHeader, {
    title: title,
    onBackPressed: onBackPressed,
    showBackButton: true
  }), /*#__PURE__*/React.createElement(KeyboardView, {
    keyboardAvoiding: true
  }, /*#__PURE__*/React.createElement(View, {
    style: style.container
  }, modalUsage === ConfirmPINModalUsage.PIN_CREATE && /*#__PURE__*/React.createElement(PINScreenTitleText, {
    header: t('PINCreate.Header'),
    subheader: t('PINCreate.Subheader')
  }), /*#__PURE__*/React.createElement(PINHeader, null), /*#__PURE__*/React.createElement(PINInput, {
    label: t('PINCreateConfirm.PINInputLabel'),
    onPINChanged: async userPinInput => {
      setPINTwo(userPinInput);
      if (userPinInput.length === PINOne.length) {
        Keyboard.dismiss();
        await onConfirmPIN(userPinInput);
      }
    },
    testID: testIdWithKey('EnterPIN'),
    accessibilityLabel: t('PINCreate.EnterPIN'),
    autoFocus: false,
    inlineMessage: errorMessage
  }), isLoading && /*#__PURE__*/React.createElement(View, {
    style: style.loadingContainer
  }, /*#__PURE__*/React.createElement(LoadingSpinner, {
    size: 50,
    color: ColorPalette.brand.primary
  })), modalState.visible && /*#__PURE__*/React.createElement(AlertModal, {
    title: modalState.title,
    message: modalState.message,
    submit: modalState.onModalDismiss
  }))));
};
export default ConfirmPINModal;
//# sourceMappingURL=ConfirmPINModal.js.map