import { Steps } from '@/app/(tabs)/user-message';
import ChoicePhoto from '@/assets/icons/svg/choicePhoto.svg';
import LookSvg from '@/assets/icons/svg/look.svg';
import { ThemedText } from '@/components/ThemedText';
import { FileUploadItem } from '@/lib/background-uploader/types';
import { useTranslation } from 'react-i18next';
import { Alert, Image, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import FilesUploader from '../file-upload/files-uploader';
import StepButton from '../ui/button/stepButton';

interface Props {
    setSteps?: (steps: Steps) => void;
    fileData: FileUploadItem[];
    setFileData: (fileData: FileUploadItem[]) => void;
    isLoading: boolean;
    handleUser: () => void;
    avatar: string;
}

export default function Look(props: Props) {
    const { fileData, setFileData, isLoading, handleUser, avatar } = props;
    const { t } = useTranslation();
    const insets = useSafeAreaInsets();

    return (
        <View style={[styles.container, { paddingBottom: insets.bottom, paddingTop: insets.top + 28 }]}>
            <View style={styles.contentContainer}>
                <ThemedText style={styles.title}>
                    {t('auth.userMessage.look', { ns: 'login' })}
                </ThemedText>
                <ThemedText style={styles.subtitle} type="inter" size="sm" weight="regular">
                    {t('auth.userMessage.avatarText', { ns: 'login' })}
                    {"\n"}
                    {t('auth.userMessage.avatorText2', { ns: 'login' })}
                </ThemedText>
                {fileData[0]?.preview || fileData[0]?.previewUrl ? (
                    <Image
                        style={styles.avatarImage}
                        source={{ uri: fileData[0].preview || fileData[0].previewUrl }}
                    />
                ) : avatar ? (
                    <Image
                        style={styles.avatarImage}
                        source={{ uri: avatar }}
                    />
                ) : (
                    <LookSvg />
                )}
                <FilesUploader
                    onUploadComplete={(fileData) => {
                        setFileData(fileData as FileUploadItem[]);
                    }}
                    showPreview={false}
                    children={
                        <View style={styles.uploadButton}>
                            <ChoicePhoto />
                            <ThemedText style={styles.uploadButtonText} type="sfPro" size="sm" weight="semiBold">
                                {t('auth.userMessage.choosePhoto', { ns: 'login' })}
                            </ThemedText>
                        </View>
                    }
                />
            </View>

            <View style={styles.footer}>
                <StepButton
                    text={t('auth.userMessage.next', { ns: 'login' })}
                    onPress={() => {
                        if (fileData[0]?.preview || fileData[0]?.previewUrl || avatar) {
                            handleUser()
                        } else {
                            Alert.alert(t('auth.userMessage.avatarRequired', { ns: 'login' }))
                        }
                    }}
                    isLoading={isLoading}
                    bg="#FFFFFF"
                    color="#4C320C"
                />
            </View>
        </View >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#AC7E35',
        paddingHorizontal: 24,
        justifyContent: 'space-between',
    },
    contentContainer: {
        flex: 1,
        alignItems: 'center',
        gap: 28
    },
    title: {
        fontSize: 32,
        lineHeight: 36,
        fontWeight: 'bold',
        color: '#FFFFFF',
    },
    subtitle: {
        fontSize: 14,
        color: "#fff",
        textAlign: 'center',
        marginBottom: 16,
    },
    avatarImage: {
        borderRadius: 150,
        width: 215,
        height: 215,
        marginBottom: 16,
    },
    uploadButton: {
        width: '100%',
        borderRadius: 999,
        paddingHorizontal: 16,
        paddingVertical: 13,
        alignItems: 'center',
        backgroundColor: '#FFF8DE',
        flexDirection: 'row',
        gap: 8,
    },
    uploadButtonText: {
        color: '#4C320C'
    },
    footer: {
        width: '100%',
    }
});