import { useState } from "react";

interface FileDropHook {
    isDragOver: boolean;
    dropAreaProps: {
        onDragOver: React.DragEventHandler;
        onDragLeave: React.DragEventHandler;
        onDrop: React.DragEventHandler;
    };
}

const useFileDrop = (onFileDrop: (files: FileList) => void): FileDropHook => {
    const [isDragOver, setIsDragOver] = useState(false);

    const handleDragOver: React.DragEventHandler = (event) => {
        event.preventDefault();
        setIsDragOver(true);
    };

    const handleDragLeave: React.DragEventHandler = () => {
        setIsDragOver(false);
    };

    const handleDrop: React.DragEventHandler = (event) => {
        event.preventDefault();
        setIsDragOver(false);

        const files = event.dataTransfer.files;

        if (onFileDrop && typeof onFileDrop === 'function') {
            onFileDrop(files);
        }
    };

    return {
        isDragOver,
        dropAreaProps: {
            onDragOver: handleDragOver,
            onDragLeave: handleDragLeave,
            onDrop: handleDrop
        },
    };
};

export default useFileDrop