"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 _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SignUpIdentityStep = ({
  colors,
  styles,
  navigate,
  nextStep,
  prevStep,
  username,
  email,
  setUsername,
  setEmail,
  validationState,
  setValidationState,
  setErrorMessage,
  validateEmail,
  validateUsername
}) => {
  const usernameRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _useI18n.useI18n)();
  const validationTimeoutRef = (0, _react.useRef)(null);

  // Debounced username validation
  const debouncedValidateUsername = (0, _react.useCallback)(usernameToValidate => {
    if (validationTimeoutRef.current) {
      clearTimeout(validationTimeoutRef.current);
    }
    validationTimeoutRef.current = setTimeout(async () => {
      if (usernameToValidate.trim().length >= 3) {
        await validateUsername(usernameToValidate.trim());
      }
    }, 500);
  }, [validateUsername]);

  // Cleanup timeout on unmount
  (0, _react.useEffect)(() => {
    return () => {
      if (validationTimeoutRef.current) {
        clearTimeout(validationTimeoutRef.current);
      }
    };
  }, []);
  const handleUsernameChange = text => {
    setUsername(text);
    setErrorMessage('');
    // Reset validation state when user types
    if (validationState.status !== 'idle') {
      setValidationState({
        status: 'idle',
        message: ''
      });
    }

    // Trigger debounced validation
    debouncedValidateUsername(text);
  };
  const handleEmailChange = text => {
    setEmail(text);
    setErrorMessage('');
  };
  const handleNext = async () => {
    if (!username.trim()) {
      setErrorMessage('Please enter a username');
      setTimeout(() => usernameRef.current?.focus(), 0);
      return;
    }
    if (username.trim().length < 3) {
      setErrorMessage('Username must be at least 3 characters');
      setTimeout(() => usernameRef.current?.focus(), 0);
      return;
    }
    if (!email.trim()) {
      setErrorMessage('Please enter an email address');
      return;
    }
    if (!validateEmail(email)) {
      setErrorMessage('Please enter a valid email address');
      return;
    }

    // Validate username availability
    const isUsernameValid = await validateUsername(username.trim());
    if (!isUsernameValid) {
      setTimeout(() => usernameRef.current?.focus(), 0);
      return;
    }
    nextStep();
  };
  const emailError = email && !validateEmail(email) ? 'Please enter a valid email address' : undefined;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: styles.modernHeader,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernTitle, {
          color: colors.text
        }],
        children: t('signup.identity.title')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernSubtitle, {
          color: colors.secondaryText
        }],
        children: t('signup.identity.subtitle')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: styles.modernInputContainer,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        ref: usernameRef,
        label: t('common.labels.username'),
        leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "person-outline",
          size: 24,
          color: colors.secondaryText
        }),
        value: username,
        onChangeText: handleUsernameChange,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "signup-username-input",
        variant: "filled",
        error: validationState.status === 'invalid' ? validationState.message : undefined,
        loading: validationState.status === 'validating',
        success: validationState.status === 'valid',
        onSubmitEditing: handleNext,
        autoFocus: true
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        label: t('common.labels.email'),
        leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "mail-outline",
          size: 24,
          color: colors.secondaryText
        }),
        value: email,
        onChangeText: handleEmailChange,
        keyboardType: "email-address",
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "signup-email-input",
        variant: "filled",
        error: emailError,
        onSubmitEditing: handleNext
      })]
    }), /*#__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',
        loading: validationState.status === 'validating',
        disabled: !username.trim() || username.trim().length < 3 || !email.trim() || !validateEmail(email) || validationState.status === 'validating' || validationState.status === 'invalid'
      }],
      colors: colors
    })]
  });
};
var _default = exports.default = SignUpIdentityStep;
//# sourceMappingURL=SignUpIdentityStep.js.map