"use strict";

import { useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import TextField from '../../components/internal/TextField';
import { useI18n } from '../../hooks/useI18n';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const SignUpSecurityStep = ({
  colors,
  styles,
  nextStep,
  prevStep,
  password,
  confirmPassword,
  setPassword,
  setConfirmPassword,
  showPassword,
  showConfirmPassword,
  setShowPassword,
  setShowConfirmPassword,
  setErrorMessage,
  validatePassword
}) => {
  const passwordRef = useRef(null);
  const {
    t
  } = useI18n();
  const handlePasswordChange = text => {
    setPassword(text);
    setErrorMessage('');
  };
  const handleConfirmPasswordChange = text => {
    setConfirmPassword(text);
    setErrorMessage('');
  };
  const handleNext = () => {
    if (!password) {
      setErrorMessage('Please enter a password');
      setTimeout(() => passwordRef.current?.focus(), 0);
      return;
    }
    if (!validatePassword(password)) {
      setErrorMessage('Password must be at least 8 characters long');
      return;
    }
    if (!confirmPassword) {
      setErrorMessage('Please confirm your password');
      return;
    }
    if (password !== confirmPassword) {
      setErrorMessage('Passwords do not match');
      return;
    }
    nextStep();
  };
  const passwordError = password && !validatePassword(password) ? 'Password must be at least 8 characters long' : undefined;
  const confirmPasswordError = confirmPassword && password !== confirmPassword ? 'Passwords do not match' : undefined;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.modernHeader,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, {
          color: colors.text
        }],
        children: t('signup.security.title')
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, {
          color: colors.secondaryText
        }],
        children: t('signup.security.subtitle')
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.modernInputContainer,
      children: [/*#__PURE__*/_jsx(TextField, {
        ref: passwordRef,
        label: t('common.labels.password'),
        leading: /*#__PURE__*/_jsx(Ionicons, {
          name: "lock-closed-outline",
          size: 24,
          color: colors.secondaryText
        }),
        trailing: /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: () => setShowPassword(!showPassword),
          style: {
            padding: 4
          },
          children: /*#__PURE__*/_jsx(Ionicons, {
            name: showPassword ? "eye-off-outline" : "eye-outline",
            size: 20,
            color: colors.secondaryText
          })
        }),
        value: password,
        onChangeText: handlePasswordChange,
        secureTextEntry: !showPassword,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "signup-password-input",
        variant: "filled",
        error: passwordError,
        onSubmitEditing: handleNext,
        autoFocus: true
      }), /*#__PURE__*/_jsx(TextField, {
        label: t('common.labels.confirmPassword'),
        leading: /*#__PURE__*/_jsx(Ionicons, {
          name: "lock-closed-outline",
          size: 24,
          color: colors.secondaryText
        }),
        trailing: /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: () => setShowConfirmPassword(!showConfirmPassword),
          style: {
            padding: 4
          },
          children: /*#__PURE__*/_jsx(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,
        onSubmitEditing: handleNext
      }), /*#__PURE__*/_jsx(View, {
        style: {
          marginTop: 16
        },
        children: /*#__PURE__*/_jsx(Text, {
          style: [styles.footerText, {
            color: colors.secondaryText,
            fontSize: 12
          }],
          children: "Password must be at least 8 characters long"
        })
      })]
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      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
    })]
  });
};
export default SignUpSecurityStep;
//# sourceMappingURL=SignUpSecurityStep.js.map