"use strict";

import { View, Text, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import PinInput from '../../components/internal/PinInput';
import { useI18n } from '../../hooks/useI18n';
import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const RecoverVerifyStep = ({
  colors,
  styles,
  nextStep,
  prevStep,
  verificationCode,
  setVerificationCode,
  errorMessage,
  setErrorMessage,
  successMessage,
  setSuccessMessage,
  isLoading,
  setIsLoading,
  identifier
}) => {
  const {
    t
  } = useI18n();
  const baseStyles = stepStyles;
  const handleVerifyCode = async () => {
    setErrorMessage('');
    setSuccessMessage('');
    if (verificationCode.length !== 6) {
      setErrorMessage(t('recover.enterCode'));
      return;
    }
    // For recovery via TOTP, proceed to reset step; server will validate during reset
    nextStep();
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, baseStyles.title, {
          color: colors.text,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('recover.verify.title')
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, baseStyles.subtitle, {
          color: colors.secondaryText,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('recover.enterCode')
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing],
      children: [/*#__PURE__*/_jsx(View, {
        style: stylesheet.pinInputWrapper,
        children: /*#__PURE__*/_jsx(PinInput, {
          value: verificationCode,
          onChange: setVerificationCode,
          length: 6,
          disabled: isLoading,
          autoFocus: true,
          colors: colors
        })
      }), successMessage && /*#__PURE__*/_jsxs(View, {
        style: [stylesheet.messageContainer, {
          backgroundColor: colors.success + '10',
          borderColor: colors.success + '30'
        }],
        children: [/*#__PURE__*/_jsx(Ionicons, {
          name: "checkmark-circle",
          size: 20,
          color: colors.success
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.footerText, {
            color: colors.success,
            fontSize: 14
          }],
          children: successMessage
        })]
      }), errorMessage && /*#__PURE__*/_jsxs(View, {
        style: [stylesheet.messageContainer, {
          backgroundColor: colors.error + '10',
          borderColor: colors.error + '30'
        }],
        children: [/*#__PURE__*/_jsx(Ionicons, {
          name: "alert-circle",
          size: 20,
          color: colors.error
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.footerText, {
            color: colors.error,
            fontSize: 14
          }],
          children: errorMessage
        })]
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
      children: /*#__PURE__*/_jsx(GroupedPillButtons, {
        buttons: [{
          text: t('common.actions.back'),
          onPress: prevStep,
          icon: 'arrow-back',
          variant: 'transparent'
        }, {
          text: t('recover.verify.action'),
          onPress: handleVerifyCode,
          icon: 'checkmark-circle-outline',
          variant: 'primary',
          loading: isLoading,
          disabled: isLoading || verificationCode.length !== 6
        }],
        colors: colors
      })
    })]
  });
};
export default RecoverVerifyStep;
const stylesheet = StyleSheet.create({
  pinInputWrapper: {
    marginBottom: 0,
    marginTop: 0
  },
  messageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: STEP_INNER_GAP,
    padding: STEP_INNER_GAP,
    borderRadius: 8,
    borderWidth: 1,
    gap: STEP_INNER_GAP
  }
});
//# sourceMappingURL=RecoverVerifyStep.js.map