"use strict";

import { useRef } from 'react';
import { View, Text } from 'react-native';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { Ionicons } from '@expo/vector-icons';
import { useI18n } from '../../hooks/useI18n';
import HighFive from '../../../assets/illustrations/HighFive';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import TextField from '../../components/internal/TextField';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SignInUsernameStep = ({
  styles,
  fadeAnim,
  slideAnim,
  scaleAnim,
  colors,
  isAddAccountMode,
  user,
  errorMessage,
  isInputFocused,
  username,
  validationStatus,
  userProfile,
  isValidating,
  handleInputFocus,
  handleInputBlur,
  handleUsernameChange,
  handleUsernameContinue: parentHandleUsernameContinue,
  navigate
}) => {
  const inputRef = useRef(null);
  const {
    t
  } = useI18n();

  // Animated styles - properly memoized to prevent re-renders
  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: fadeAnim.value,
      transform: [{
        translateX: slideAnim.value
      }, {
        scale: scaleAnim.value
      }]
    };
  });
  const handleUsernameContinue = () => {
    if (!username || validationStatus === 'invalid') {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 0);
    }
    parentHandleUsernameContinue();
  };
  return /*#__PURE__*/_jsxs(Animated.View, {
    style: [styles.stepContainer, animatedStyle],
    children: [/*#__PURE__*/_jsx(HighFive, {
      width: 100,
      height: 100
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.modernHeader,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, {
          color: colors.text
        }],
        children: isAddAccountMode ? t('signin.addAccountTitle') || 'Add Another Account' : t('signin.title') || 'Sign In'
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, {
          color: colors.secondaryText
        }],
        children: isAddAccountMode ? t('signin.addAccountSubtitle') || 'Sign in with another account' : t('signin.subtitle') || 'Sign in to continue your journey'
      })]
    }), isAddAccountMode && /*#__PURE__*/_jsxs(View, {
      style: [styles.modernInfoCard, {
        backgroundColor: colors.inputBackground
      }],
      children: [/*#__PURE__*/_jsx(Ionicons, {
        name: "information-circle",
        size: 20,
        color: colors.primary
      }), /*#__PURE__*/_jsxs(Text, {
        style: [styles.modernInfoText, {
          color: colors.text
        }],
        children: [t('signin.currentlySignedInAs', {
          username: user?.username
        }) || 'Currently signed in as ', /*#__PURE__*/_jsx(Text, {
          style: {
            fontWeight: 'bold'
          },
          children: user?.username
        })]
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: styles.modernInputContainer,
      children: /*#__PURE__*/_jsx(TextField, {
        ref: inputRef,
        label: t('common.labels.username'),
        leading: /*#__PURE__*/_jsx(Ionicons, {
          name: "person-outline",
          size: 24,
          color: colors.secondaryText
        }),
        value: username,
        onChangeText: handleUsernameChange,
        onFocus: handleInputFocus,
        onBlur: handleInputBlur,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "username-input",
        variant: "filled",
        error: validationStatus === 'invalid' ? errorMessage : undefined,
        loading: validationStatus === 'validating',
        success: validationStatus === 'valid',
        onSubmitEditing: handleUsernameContinue,
        autoFocus: true
      })
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      buttons: [{
        text: t('common.links.signUp') || 'Sign Up',
        onPress: () => navigate('SignUp'),
        icon: 'person-add',
        variant: 'transparent'
      }, {
        text: t('common.actions.continue'),
        onPress: handleUsernameContinue,
        icon: 'arrow-forward',
        variant: 'primary',
        loading: isValidating,
        testID: 'username-next-button'
      }],
      colors: colors
    })]
  });
};
export default SignInUsernameStep;
//# sourceMappingURL=SignInUsernameStep.js.map