'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import './index.scss';
const handleDragOver = (e)=>{
    e.preventDefault();
    e.stopPropagation();
};
const baseClass = 'dropzone';
export function Dropzone({ children, className, disabled = false, dropzoneStyle = 'default', multipleFiles, onChange }) {
    const dropRef = React.useRef(null);
    const [dragging, setDragging] = React.useState(false);
    const addFiles = React.useCallback((files)=>{
        if (!multipleFiles && files.length > 1) {
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(files[0]);
            onChange(dataTransfer.files);
        } else {
            onChange(files);
        }
    }, [
        multipleFiles,
        onChange
    ]);
    const handlePaste = React.useCallback((e)=>{
        e.preventDefault();
        e.stopPropagation();
        if (e.clipboardData.files && e.clipboardData.files.length > 0) {
            addFiles(e.clipboardData.files);
        }
    }, [
        addFiles
    ]);
    const handleDragEnter = React.useCallback((e)=>{
        e.preventDefault();
        e.stopPropagation();
        setDragging(true);
    }, []);
    const handleDragLeave = React.useCallback((e)=>{
        e.preventDefault();
        e.stopPropagation();
        setDragging(false);
    }, []);
    const handleDrop = React.useCallback((e)=>{
        e.preventDefault();
        e.stopPropagation();
        setDragging(false);
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            addFiles(e.dataTransfer.files);
            setDragging(false);
            try {
                e.dataTransfer.clearData();
            } catch  {}
        }
    }, // Firefox throws NoModificationAllowedError when calling clearData() on a protected DataTransfer during drop events
    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/clearData#exceptions
    [
        addFiles
    ]);
    React.useEffect(()=>{
        const div = dropRef.current;
        if (div && !disabled) {
            div.addEventListener('dragenter', handleDragEnter);
            div.addEventListener('dragleave', handleDragLeave);
            div.addEventListener('dragover', handleDragOver);
            div.addEventListener('drop', handleDrop);
            div.addEventListener('paste', handlePaste);
            return ()=>{
                div.removeEventListener('dragenter', handleDragEnter);
                div.removeEventListener('dragleave', handleDragLeave);
                div.removeEventListener('dragover', handleDragOver);
                div.removeEventListener('drop', handleDrop);
                div.removeEventListener('paste', handlePaste);
            };
        }
        return ()=>null;
    }, [
        disabled,
        handleDragEnter,
        handleDragLeave,
        handleDrop,
        handlePaste
    ]);
    const classes = [
        baseClass,
        className,
        dragging ? 'dragging' : '',
        `dropzoneStyle--${dropzoneStyle}`
    ].filter(Boolean).join(' ');
    return /*#__PURE__*/ _jsxDEV("div", {
        className: classes,
        ref: dropRef,
        children: children
    }, void 0, false, {
        fileName: "src/elements/Dropzone/index.tsx",
        lineNumber: 123,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map