"use strict";

import { useRef, useCallback, useEffect } from 'react';
import { View, Text, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import TextField from '../../components/internal/TextField';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SignUpSecurityStep = ({
  styles,
  fadeAnim,
  slideAnim,
  colors,
  formData,
  passwordVisibility,
  updateField,
  validatePassword,
  validatePasswordsMatch,
  prevStep,
  handleSecurityNext: parentHandleSecurityNext,
  setErrorMessage,
  togglePasswordVisibility,
  PASSWORD_MIN_LENGTH
}) => {
  const passwordRef = useRef(null);
  const confirmPasswordRef = useRef(null);

  // Focus the first invalid field on error or when step becomes active
  useEffect(() => {
    if (formData.password && typeof formData.password === 'string' && !validatePassword(formData.password)) {
      setTimeout(() => {
        passwordRef.current?.focus();
      }, 0);
    } else if (formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword)) {
      setTimeout(() => {
        confirmPasswordRef.current?.focus();
      }, 0);
    }
  }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
  const handleSecurityNext = useCallback(() => {
    if (!formData.password || !validatePassword(formData.password)) {
      setTimeout(() => {
        passwordRef.current?.focus();
      }, 0);
      return;
    }
    if (!formData.confirmPassword || !validatePasswordsMatch(formData.password, formData.confirmPassword)) {
      setTimeout(() => {
        confirmPasswordRef.current?.focus();
      }, 0);
      return;
    }
    parentHandleSecurityNext();
  }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch, parentHandleSecurityNext]);
  return /*#__PURE__*/_jsxs(Animated.View, {
    style: [styles.stepContainer, {
      opacity: fadeAnim,
      transform: [{
        translateX: slideAnim
      }]
    }],
    children: [/*#__PURE__*/_jsx(View, {
      style: styles.modernHeader,
      children: /*#__PURE__*/_jsx(Text, {
        style: [styles.stepTitle, {
          color: colors.text
        }],
        children: "Secure your account"
      })
    }), /*#__PURE__*/_jsx(TextField, {
      ref: passwordRef,
      leading: /*#__PURE__*/_jsx(Ionicons, {
        name: "lock-closed-outline",
        size: 24,
        color: colors.secondaryText
      }),
      label: "Password",
      value: formData.password,
      onChangeText: text => updateField('password', text),
      secureTextEntry: !passwordVisibility.password,
      autoCapitalize: "none",
      autoCorrect: false,
      testID: "password-input",
      variant: "filled",
      error: formData.password && typeof formData.password === 'string' && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined,
      onSubmitEditing: () => confirmPasswordRef.current?.focus(),
      autoFocus: true
    }), /*#__PURE__*/_jsxs(Text, {
      style: [styles.passwordHint, {
        color: colors.secondaryText
      }],
      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
    }), /*#__PURE__*/_jsx(TextField, {
      ref: confirmPasswordRef,
      leading: /*#__PURE__*/_jsx(Ionicons, {
        name: "lock-closed-outline",
        size: 24,
        color: colors.secondaryText
      }),
      label: "Confirm Password",
      value: formData.confirmPassword,
      onChangeText: text => updateField('confirmPassword', text),
      secureTextEntry: !passwordVisibility.confirmPassword,
      autoCapitalize: "none",
      autoCorrect: false,
      testID: "confirm-password-input",
      variant: "filled",
      error: formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined,
      onSubmitEditing: handleSecurityNext
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      buttons: [{
        text: 'Back',
        onPress: prevStep,
        icon: 'arrow-back',
        variant: 'transparent'
      }, {
        text: 'Next',
        onPress: handleSecurityNext,
        icon: 'arrow-forward',
        variant: 'primary'
      }],
      colors: colors
    })]
  });
};
export default SignUpSecurityStep;
//# sourceMappingURL=SignUpSecurityStep.js.map