"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 _useI18n = require("../../hooks/useI18n");
var _spacing = require("../../styles/spacing");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SignUpSecurityStep = ({
  colors,
  styles,
  nextStep,
  prevStep,
  password,
  confirmPassword,
  setPassword,
  setConfirmPassword,
  showPassword,
  showConfirmPassword,
  setShowPassword,
  setShowConfirmPassword,
  setErrorMessage,
  validatePassword
}) => {
  const passwordRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _useI18n.useI18n)();
  const baseStyles = _spacing.stepStyles;
  const handlePasswordChange = text => {
    setPassword(text);
    setErrorMessage('');
  };
  const handleConfirmPasswordChange = text => {
    setConfirmPassword(text);
    setErrorMessage('');
  };
  const handleNext = () => {
    if (!password) {
      setErrorMessage(t('signup.password.required') || 'Please enter a password');
      setTimeout(() => passwordRef.current?.focus(), 0);
      return;
    }
    if (!validatePassword(password)) {
      setErrorMessage(t('signup.password.minLength') || 'Password must be at least 8 characters long');
      return;
    }
    if (!confirmPassword) {
      setErrorMessage(t('signup.password.confirmRequired') || 'Please confirm your password');
      return;
    }
    if (password !== confirmPassword) {
      setErrorMessage(t('signup.password.mismatch') || 'Passwords do not match');
      return;
    }
    nextStep();
  };
  const passwordError = password && !validatePassword(password) ? t('signup.password.minLength') || 'Password must be at least 8 characters long' : undefined;
  const confirmPasswordError = confirmPassword && password !== confirmPassword ? t('signup.password.mismatch') || 'Passwords do not match' : undefined;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernTitle, baseStyles.title, {
          color: colors.text,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signup.security.title')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernSubtitle, baseStyles.subtitle, {
          color: colors.secondaryText,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signup.security.subtitle')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, {
        gap: _spacing.STEP_INNER_GAP
      }],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        ref: passwordRef,
        label: t('common.labels.password'),
        leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "lock-closed-outline",
          size: 24,
          color: colors.secondaryText
        }),
        trailing: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          onPress: () => setShowPassword(!showPassword),
          style: stylesheet.iconButton,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
            name: showPassword ? 'eye-off-outline' : 'eye-outline',
            size: 20,
            color: colors.secondaryText
          })
        }),
        value: password,
        onChangeText: handlePasswordChange,
        secureTextEntry: !showPassword,
        passwordStrength: true,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "signup-password-input",
        variant: "filled",
        error: passwordError,
        helperText: t('signup.password.helper') || 'At least 8 characters',
        onSubmitEditing: handleNext,
        autoFocus: true,
        accessibilityLabel: t('common.labels.password'),
        accessibilityHint: t('signup.password.helper') || 'Enter a password, at least 8 characters long',
        style: {
          marginBottom: 0
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        label: t('common.labels.confirmPassword'),
        leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "lock-closed-outline",
          size: 24,
          color: colors.secondaryText
        }),
        trailing: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          onPress: () => setShowConfirmPassword(!showConfirmPassword),
          style: stylesheet.iconButton,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
            name: showConfirmPassword ? 'eye-off-outline' : 'eye-outline',
            size: 20,
            color: colors.secondaryText
          })
        }),
        value: confirmPassword,
        onChangeText: handleConfirmPasswordChange,
        secureTextEntry: !showConfirmPassword,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "signup-confirm-password-input",
        variant: "filled",
        error: confirmPasswordError,
        helperText: confirmPassword && password !== confirmPassword ? t('signup.password.mismatch') || 'Passwords do not match' : undefined,
        onSubmitEditing: handleNext,
        accessibilityLabel: t('common.labels.confirmPassword'),
        accessibilityHint: t('signup.password.confirmHint') || 'Re-enter your password to confirm',
        style: {
          marginBottom: 0
        }
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
        buttons: [{
          text: t('common.actions.back'),
          onPress: prevStep,
          icon: 'arrow-back',
          variant: 'transparent'
        }, {
          text: t('common.actions.next'),
          onPress: handleNext,
          icon: 'arrow-forward',
          variant: 'primary',
          disabled: !password || !confirmPassword || password !== confirmPassword
        }],
        colors: colors
      })
    })]
  });
};
var _default = exports.default = SignUpSecurityStep;
const stylesheet = _reactNative.StyleSheet.create({
  iconButton: {
    padding: 4
  },
  helperText: {
    fontSize: 12,
    marginTop: 0
  }
});
//# sourceMappingURL=SignUpSecurityStep.js.map