import { Steps } from '@/app/(tabs)/user-message';
import { ThemedText } from '@/components/ThemedText';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, KeyboardAvoidingView, Platform, TextInput, TouchableOpacity, View } from 'react-native';

interface Props {
    setSteps: (steps: Steps) => void;
    username: string;
    setUsername: (username: string) => void;
}

export default function UserName(props: Props) {
    const { setSteps, username, setUsername } = props
    const { t } = useTranslation();
    const [isLoading, setIsLoading] = useState(false)
    const [error, setError] = useState('')
    const handleUserName = () => {
        if (!username) {
            setError('Username is required')
            return;
        }
        setIsLoading(true)
        setSteps("look")
        setIsLoading(false)
    }

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={{ flex: 1 }}
        >
            <View className='bg-bgPrimary flex-1 h-full'>
                <View className="flex-1" />
                {/* Input container fixed at bottom */}
                <View className="w-full bg-white p-4 border-t border-gray-200 rounded-t-3xl">
                    <View className="flex-col items-center justify-center w-full gap-[3rem]">
                        <View className='w-full flex flex-row items-center justify-between'>
                            <ThemedText className="text-textSecondary font-semibold">{t('auth.userMessage.title', { ns: 'login' })}</ThemedText>
                            <ThemedText className="text-[#E2793F] font-semibold">{error}</ThemedText>
                        </View>
                        <View className='w-full'>
                            <ThemedText className="!text-textPrimary ml-2 mb-2 font-semibold">{t('auth.userMessage.username', { ns: 'login' })}</ThemedText>
                            <TextInput
                                className="bg-inputBackground rounded-2xl p-4 w-full"
                                placeholder={t('auth.userMessage.usernamePlaceholder', { ns: 'login' })}
                                placeholderTextColor="#9CA3AF"
                                value={username}
                                onChangeText={setUsername}
                            />
                        </View>
                        <TouchableOpacity
                            className={`w-full bg-[#E2793F] rounded-full text-[#fff] p-4 items-center mb-6 ${isLoading ? 'opacity-70' : ''} rounded-2xl`}
                            onPress={handleUserName}
                            disabled={isLoading}
                        >
                            {isLoading ? (
                                <ActivityIndicator color="#fff" />
                            ) : (
                                <ThemedText className="!text-white font-semibold">
                                    {t('auth.userMessage.next', { ns: 'login' })}
                                </ThemedText>
                            )}
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </KeyboardAvoidingView>
    )
}