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 '@/types/upload';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
import AutoUploadScreen from '../file-upload/autoUploadScreen';
import FilesUploader from '../file-upload/files-uploader';
import MediaStatsScreen from '../file-upload/getTotal';

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();

    return (
        <View className="flex-1 bg-textPrimary justify-between p-[2rem]">
            <View className="flex-1 justify-center items-center">
                <ThemedText className="text-4xl font-bold !text-white mb-[2rem]">
                    {t('auth.userMessage.look', { ns: 'login' })}
                </ThemedText>
                <ThemedText className="text-base !text-white/80 text-center mb-[2rem]">
                    {t('auth.userMessage.avatarText', { ns: 'login' })}
                    {"\n"}
                    {t('auth.userMessage.avatorText2', { ns: 'login' })}
                </ThemedText>
                {
                    fileData[0]?.preview
                        ?
                        <Image
                            className='rounded-full w-[10rem] h-[10rem]'
                            source={{ uri: fileData[0].preview }}
                        />
                        :
                        avatar
                            ?
                            <Image
                                className='rounded-full w-[10rem] h-[10rem]'
                                source={{ uri: avatar }}
                            />
                            :
                            <LookSvg />
                }
                <FilesUploader
                    onUploadComplete={(fileData) => {
                        setFileData(fileData as FileUploadItem[]);
                    }}
                    showPreview={false}
                    children={
                        <View className="w-full rounded-full px-4 py-2 mt-4 items-center bg-inputBackground flex-row flex gap-2">
                            <ChoicePhoto />
                            <ThemedText className="text-textTertiary text-lg font-semibold">
                                {t('auth.userMessage.choosePhoto', { ns: 'login' })}
                            </ThemedText>
                        </View>
                    }
                />
                <AutoUploadScreen />
                <MediaStatsScreen />
            </View>

            <View className="w-full">
                <TouchableOpacity
                    className={`w-full bg-white rounded-full p-4 items-center ${isLoading ? 'opacity-70' : ''}`}
                    onPress={handleUser}
                    disabled={isLoading}
                >
                    {isLoading ? (
                        <ActivityIndicator color="#000" />
                    ) : (
                        <ThemedText className="text-textTertiary text-lg font-semibold">
                            {t('auth.userMessage.next', { ns: 'login' })}
                        </ThemedText>
                    )}
                </TouchableOpacity>
            </View>
        </View>
    );
}