"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 _HighFive = _interopRequireDefault(require("../../../assets/illustrations/HighFive"));
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 SignInUsernameStep = ({
  colors,
  styles,
  navigate,
  nextStep,
  username,
  setUsername,
  errorMessage,
  setErrorMessage,
  validationStatus,
  userProfile,
  isValidating,
  isAddAccountMode,
  user,
  validateUsername
}) => {
  const inputRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _useI18n.useI18n)();

  // Monitor username prop changes
  (0, _react.useEffect)(() => {
    console.log('👀 SignInUsernameStep username prop changed:', username);
  }, [username]);
  const handleUsernameChange = text => {
    console.log('📝 Username input changed:', text);
    setUsername(text);
    if (errorMessage) setErrorMessage('');
  };
  const handleContinue = async () => {
    console.log('🚀 Continue button pressed, username:', username);
    const trimmedUsername = username?.trim() || '';
    if (!trimmedUsername) {
      console.log('❌ Username is empty');
      setErrorMessage('Please enter your username.');
      setTimeout(() => inputRef.current?.focus(), 0);
      return;
    }
    if (trimmedUsername.length < 2) {
      console.log('❌ Username too short');
      setErrorMessage('Username must be at least 3 characters.');
      return;
    }
    console.log('🔍 Starting username validation...');
    try {
      // Validate the username before proceeding
      const isValid = await validateUsername(trimmedUsername);
      console.log('📊 Validation result:', isValid);
      if (isValid) {
        console.log('✅ Validation passed, proceeding to next step');
        nextStep();
      } else {
        console.log('❌ Validation failed, staying on current step');
      }
    } catch (error) {
      console.error('🚨 Error during validation:', error);
      setErrorMessage('Unable to validate username. Please try again.');
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
      width: 100,
      height: 100
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: styles.modernHeader,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernTitle, {
          color: colors.text
        }],
        children: isAddAccountMode ? t('signin.addAccountTitle') : t('signin.title')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernSubtitle, {
          color: colors.secondaryText
        }],
        children: isAddAccountMode ? t('signin.addAccountSubtitle') : t('signin.subtitle')
      })]
    }), isAddAccountMode && user && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [styles.modernInfoCard, {
        backgroundColor: colors.inputBackground
      }],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
        name: "information-circle",
        size: 20,
        color: colors.primary
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
        style: [styles.modernInfoText, {
          color: colors.text
        }],
        children: [t('signin.currentlySignedInAs', {
          username: user.username
        }) || 'Currently signed in as ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: {
            fontWeight: 'bold'
          },
          children: user.username
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.modernInputContainer,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        ref: inputRef,
        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: "username-input",
        variant: "filled",
        error: validationStatus === 'invalid' ? errorMessage : undefined,
        loading: validationStatus === 'validating',
        success: validationStatus === 'valid',
        onSubmitEditing: () => handleContinue(),
        autoFocus: true
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
      buttons: [{
        text: t('common.links.signUp'),
        onPress: () => navigate('SignUp'),
        icon: 'person-add',
        variant: 'transparent'
      }, {
        text: t('common.actions.continue'),
        onPress: handleContinue,
        icon: 'arrow-forward',
        variant: 'primary',
        loading: isValidating,
        disabled: !username || username.trim().length < 2 || isValidating,
        testID: 'username-next-button'
      }],
      colors: colors
    })]
  });
};
var _default = exports.default = SignInUsernameStep;
//# sourceMappingURL=SignInUsernameStep.js.map