import React, { useState } from 'react';
import DropZone from '@/components/widgets/DropZone';
import { convertBytesToKBMB } from '@/lib/helpers';
import toast from "react-hot-toast";

interface SingleFileUploadProps {
    fileType?: string;
    label?: string;
    error?: string;
    id?: string;
    onFiles?: (file: File | null) => void;
}

export default function SingleFileUpload({
    fileType,
    label,
    error,
    id,
    onFiles,
}: SingleFileUploadProps) {
    const [uploaded, setUploaded] = useState<File | null>(null);

    const isValidSize = (file: File): boolean => {
        return file.size < 50 * 1024 * 1024;
    };

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

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

        if (!isValidSize(file)) {
            toast.error('The file size is invalid!');
            return;
        }

        setUploaded(file);
        onFiles?.(file);
    };

    return (
        <>
            {!uploaded && (
                <DropZone
                    onFilesSelected={handleFilesSelected}
                    fileType={fileType}
                    label={label}
                    error={error}
                />
            )}

            {uploaded && (
                <ul className="mt-2 divide-y divide-gray-200 border rounded-lg">
                    <li className="flex items-center justify-between px-4 py-3">
                        <span className="text-sm">{uploaded.name}</span>
                        <span className="flex items-center space-x-4 text-sm text-indigo-600">
                            <span>{convertBytesToKBMB(uploaded.size)}</span>
                            <button onClick={removeFile} className="text-red-500 hover:text-red-700">
                                🗑️
                            </button>
                        </span>
                    </li>
                </ul>
            )}
        </>
    );
}