import { Steps } from '@/app/(tabs)/user-message';
import { ThemedText } from '@/components/ThemedText';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Dimensions, KeyboardAvoidingView, Platform, StyleSheet, TextInput, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import StepButton from '../ui/button/stepButton';

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 height = Dimensions.get('window').height;
    const insets = useSafeAreaInsets();
    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={styles.keyboardAvoidingView}
        >
            <View style={[styles.container]}>
                <View style={styles.flex1} />
                <View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
                    <View style={styles.contentContainer}>
                        <View style={styles.titleContainer}>
                            <ThemedText style={styles.titleText} color="textSecondary" size='xl' weight='bold'>{t('auth.userMessage.title', { ns: 'login' })}</ThemedText>
                        </View>
                        <View style={styles.inputWrapper}>
                            <View style={styles.labelContainer}>
                                <ThemedText style={styles.labelText} color="textPrimary" type='sfPro' size='sm' weight='bold'>{t('auth.userMessage.username', { ns: 'login' })}</ThemedText>
                                <ThemedText style={styles.errorText}>{error}</ThemedText>
                            </View>
                            <TextInput
                                style={[styles.textInput, { marginBottom: height * 0.2 }]}
                                placeholder={t('auth.userMessage.usernamePlaceholder', { ns: 'login' })}
                                placeholderTextColor="#9CA3AF"
                                value={username}
                                onChangeText={setUsername}
                            />
                        </View>
                        <StepButton text={t('auth.userMessage.next', { ns: 'login' })} onPress={handleUserName} isLoading={isLoading} />
                    </View>
                </View>
            </View>
        </KeyboardAvoidingView>
    )
}

const styles = StyleSheet.create({
    keyboardAvoidingView: {
        flex: 1,
    },
    container: {
        flex: 1,
        backgroundColor: '#FFB645',
        height: '100%',
    },
    flex1: {
        flex: 1,
    },
    inputContainer: {
        width: '100%',
        backgroundColor: '#FFFFFF',
        padding: 16,
        borderTopWidth: 1,
        borderTopColor: '#E5E7EB',
        borderTopLeftRadius: 50,
        borderTopRightRadius: 50,
    },
    contentContainer: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        gap: 16,
    },
    titleContainer: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 20,
    },
    titleText: {
        marginBottom: 16,
    },
    inputWrapper: {
        width: '100%',
        marginBottom: 16,
    },
    labelContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 10,
    },
    labelText: {
        color: '#AC7E35',
        marginLeft: 8,
        fontSize: 14,
        fontWeight: '600',
    },
    errorText: {
        color: '#E2793F',
        fontSize: 14,
    },
    textInput: {
        backgroundColor: '#FFF8DE',
        borderRadius: 16,
        padding: 20,
        width: '100%',
    }
});