import React, { useState } from 'react';
import DropZone from './DropZone';

interface SingleImageUploadProps {
    title?: string;
    onFile?: (file: File | null) => void;
}

export default function SingleImageUpload({ title, onFile }: SingleImageUploadProps) {
    const [uploaded, setUploaded] = useState<File | null>(null);
    const [uploadedUrl, setUploadedUrl] = useState<string | null>(null);

    const removeFile = () => {
        setUploaded(null);
        setUploadedUrl(null);
        onFile?.(null);
    };

    const readFileAsDataUrl = (file: File): Promise<string> => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (e) => resolve(e.target?.result as string);
            reader.onerror = () => reject('Error reading file');
            reader.readAsDataURL(file);
        });
    };

    const handleFilesSelected = async (files: FileList | null) => {
        if (!files || files.length === 0) return;
        const file = files[0];
        setUploaded(file);

        try {
            const url = await readFileAsDataUrl(file);
            setUploadedUrl(url);
        } catch (error) {
            console.error(error);
        }

        onFile?.(file);
    };

    if (uploaded && uploadedUrl) {
        return (
            <div className="border-2 border-dashed border-emerald-500 rounded-lg p-4 flex flex-col items-center">
                <img src={uploadedUrl} alt="" className="max-w-[25%] rounded mb-2" />
                <button
                    onClick={removeFile}
                    className="text-red-500 hover:text-red-700 text-xl"
                >
                    🗑️
                </button>
            </div>
        );
    }

    return <DropZone onFilesSelected={handleFilesSelected} label={title} />;
}