"use strict";

import { useRef } from 'react';
import { View, Text, Animated } from 'react-native';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import TextField from '../../components/internal/TextField';
import { Ionicons } from '@expo/vector-icons';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SignUpIdentityStep = ({
  styles,
  fadeAnim,
  slideAnim,
  colors,
  formData,
  validationState,
  updateField,
  setErrorMessage,
  prevStep,
  handleIdentityNext: parentHandleIdentityNext,
  ValidationMessage,
  validateEmail,
  navigate
}) => {
  const inputRef = useRef(null);
  const handleIdentityNext = () => {
    if (!formData.username || validationState.status === 'invalid') {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 0);
    }
    parentHandleIdentityNext();
  };
  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: "Who are you?"
      })
    }), /*#__PURE__*/_jsx(TextField, {
      ref: inputRef,
      leading: /*#__PURE__*/_jsx(Ionicons, {
        name: "person-outline",
        size: 24,
        color: colors.secondaryText
      }),
      label: "Username",
      value: formData.username,
      onChangeText: text => {
        updateField('username', text);
        setErrorMessage('');
      },
      autoCapitalize: "none",
      autoCorrect: false,
      testID: "username-input",
      variant: "filled",
      error: validationState.status === 'invalid' ? validationState.message : undefined,
      loading: validationState.status === 'validating',
      success: validationState.status === 'valid',
      onSubmitEditing: handleIdentityNext,
      autoFocus: true
    }), /*#__PURE__*/_jsx(ValidationMessage, {
      validationState: validationState,
      colors: colors,
      styles: styles
    }), /*#__PURE__*/_jsx(TextField, {
      leading: /*#__PURE__*/_jsx(Ionicons, {
        name: "mail-outline",
        size: 24,
        color: colors.secondaryText
      }),
      label: "Email",
      value: formData.email,
      onChangeText: text => {
        updateField('email', text);
      },
      keyboardType: "email-address",
      autoCapitalize: "none",
      autoCorrect: false,
      testID: "email-input",
      variant: "filled",
      error: formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      buttons: [{
        text: 'Back',
        onPress: prevStep,
        icon: 'arrow-back',
        variant: 'transparent'
      }, {
        text: 'Next',
        onPress: handleIdentityNext,
        icon: 'arrow-forward',
        variant: 'primary'
      }],
      colors: colors
    })]
  });
};
export default SignUpIdentityStep;
//# sourceMappingURL=SignUpIdentityStep.js.map