import SvgIcon from "@/components/svg-icon";
import React from 'react';
import { useTranslation } from "react-i18next";
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { FileStatus } from "./file-uploader";

interface FileItemProps {
    fileStatus: FileStatus;
    index: number;
    onRemove: (file: File) => void;
    formatFileSize: (bytes: number) => string;
    disabled?: boolean;
}

export default function FileItem({
    fileStatus,
    index,
    onRemove,
    formatFileSize,
    disabled = false
}: FileItemProps) {
    const { t } = useTranslation();
    const fadeAnim = React.useRef(new Animated.Value(0)).current;
    const translateY = React.useRef(new Animated.Value(10)).current;

    React.useEffect(() => {
        Animated.parallel([
            Animated.timing(fadeAnim, {
                toValue: 1,
                duration: 200,
                delay: index * 50,
                useNativeDriver: true,
            }),
            Animated.timing(translateY, {
                toValue: 0,
                duration: 200,
                delay: index * 50,
                useNativeDriver: true,
            })
        ]).start();
    }, []);

    return (
        <Animated.View
            style={[
                styles.card,
                {
                    opacity: fadeAnim,
                    transform: [{ translateY }]
                }
            ]}
        >
            <View style={styles.cardBody}>
                <View style={styles.fileInfo}>
                    <Text style={styles.fileName}>{fileStatus.file.name}</Text>
                    <Text style={styles.fileSize}>{formatFileSize(fileStatus.file.size)}</Text>
                </View>
                {!disabled && (
                    <TouchableOpacity
                        onPress={() => onRemove(fileStatus.file)}
                        style={styles.removeButton}
                    >
                        <SvgIcon name="close" size={16} color="#666" />
                    </TouchableOpacity>
                )}
            </View>
            {fileStatus.progress !== undefined && fileStatus.progress < 100 && (
                <View style={styles.progressContainer}>
                    <View style={[styles.progressBar, { width: `${fileStatus.progress}%` }]} />
                </View>
            )}
        </Animated.View>
    );
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: '#fff',
        borderRadius: 8,
        marginBottom: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
    },
    cardBody: {
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    fileInfo: {
        flex: 1,
    },
    fileName: {
        fontSize: 14,
        color: '#333',
        marginBottom: 4,
    },
    fileSize: {
        fontSize: 12,
        color: '#666',
    },
    removeButton: {
        padding: 4,
    },
    progressContainer: {
        height: 2,
        backgroundColor: '#e9ecef',
        width: '100%',
    },
    progressBar: {
        height: '100%',
        backgroundColor: '#007bff',
    },
});