import { TouchableOpacity, StyleSheet } from 'react-native';
import { memo } from 'react';
import { XStack, YStack } from 'tamagui';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';
import { VerificationCodeInput } from './VerificationCodeInput';
import { useTranslation } from '@/node_modules/react-i18next';
import { useAppStore } from '@/stores';

const styles = StyleSheet.create({
  resendButton: {
    alignSelf: 'flex-start',
    marginTop: wp(10),
  },
});

export const CodePanel = ({ telNum, verificationCode, setVerificationCode, countdown, resendCode, autoFocus = true, onComplete }) => {
  const { t } = useTranslation('login');
  const primaryColor = useAppStore(s => s.primary);
  return (
    <YStack>
      <XStack>
        <CustomText style={{ color: '#BDBDBD', fontSize: wp(14), marginRight: wp(10) }}>
          {t('code.sentTo')}
        </CustomText>
        <CustomText style={{ color: '#191818', fontSize: wp(14) }}>
          {telNum}
        </CustomText>
      </XStack>
      
      <VerificationCodeInput 
        verificationCode={verificationCode}
        setVerificationCode={setVerificationCode}
        autoFocus={autoFocus}
        onComplete={onComplete}
      />
      
      <TouchableOpacity 
        style={styles.resendButton}
        onPress={resendCode}
        disabled={countdown > 0}
      >
        <CustomText 
          style={{ color: countdown > 0 ? '#BDBDBD' : primaryColor, fontSize: wp(14) }}
        >
          {countdown > 0 ? t('code.resendWithCountdown', { count: countdown }) : t('code.resend')}
        </CustomText>
      </TouchableOpacity>
    </YStack>
  );
};

export default memo(CodePanel);