"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _GroupedPillButtons = _interopRequireDefault(require("../../components/internal/GroupedPillButtons"));
var _TextField = _interopRequireDefault(require("../../components/internal/TextField"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SignUpSecurityStep = ({
  styles,
  fadeAnim,
  slideAnim,
  colors,
  formData,
  passwordVisibility,
  updateField,
  validatePassword,
  validatePasswordsMatch,
  prevStep,
  handleSecurityNext: parentHandleSecurityNext,
  setErrorMessage,
  togglePasswordVisibility,
  PASSWORD_MIN_LENGTH
}) => {
  const passwordRef = (0, _react.useRef)(null);
  const confirmPasswordRef = (0, _react.useRef)(null);

  // Focus the first invalid field on error or when step becomes active
  (0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
    style: [styles.stepContainer, {
      opacity: fadeAnim,
      transform: [{
        translateX: slideAnim
      }]
    }],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.modernHeader,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.stepTitle, {
          color: colors.text
        }],
        children: "Secure your account"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
      ref: passwordRef,
      leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
      style: [styles.passwordHint, {
        color: colors.secondaryText
      }],
      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
      ref: confirmPasswordRef,
      leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
      buttons: [{
        text: 'Back',
        onPress: prevStep,
        icon: 'arrow-back',
        variant: 'transparent'
      }, {
        text: 'Next',
        onPress: handleSecurityNext,
        icon: 'arrow-forward',
        variant: 'primary'
      }],
      colors: colors
    })]
  });
};
var _default = exports.default = SignUpSecurityStep;
//# sourceMappingURL=SignUpSecurityStep.js.map