"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _GroupedPillButtons = _interopRequireDefault(require("../../components/internal/GroupedPillButtons"));
var _TextField = _interopRequireDefault(require("../../components/internal/TextField"));
var _vectorIcons = require("@expo/vector-icons");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SignUpIdentityStep = ({
  styles,
  fadeAnim,
  slideAnim,
  colors,
  formData,
  validationState,
  updateField,
  setErrorMessage,
  prevStep,
  handleIdentityNext: parentHandleIdentityNext,
  ValidationMessage,
  validateEmail,
  navigate
}) => {
  const inputRef = (0, _react.useRef)(null);
  const handleIdentityNext = () => {
    if (!formData.username || validationState.status === 'invalid') {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 0);
    }
    parentHandleIdentityNext();
  };
  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: "Who are you?"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
      ref: inputRef,
      leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsx)(ValidationMessage, {
      validationState: validationState,
      colors: colors,
      styles: styles
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
      leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
      buttons: [{
        text: 'Back',
        onPress: prevStep,
        icon: 'arrow-back',
        variant: 'transparent'
      }, {
        text: 'Next',
        onPress: handleIdentityNext,
        icon: 'arrow-forward',
        variant: 'primary'
      }],
      colors: colors
    })]
  });
};
var _default = exports.default = SignUpIdentityStep;
//# sourceMappingURL=SignUpIdentityStep.js.map