"use client";
import { useEffect, useRef, useState } from "react";
const noop = ()=>{
// do nothing
};
/**
 * @example
 * Simple Example
 * ```tsx
 * import { useDropzone, useFileUpload } from "@react-md/core"
 * import type { CSSProperties, ReactElement } from "react";
 *
 * const style: CSSProperties = {
 *   border: '1px solid blue',
 * };
 *
 * function Example(): ReactElement {
 *   const { onDrop } = useFileUpload()
 *   const { isOver, dropzoneHandlers } = useDropzone({
 *     onDrop(event) {
 *       // normally use the `onDrop` behavior from `useFileUpload` to upload
 *       // files:
 *       // onDrop(event);
 *     },
 *     disableDragging: true,
 *   });
 *
 *   return (
 *     <div {...dropzoneHandlers} style={isOver ? style : {}}>
 *       Drag and drop some files!
 *       {isOver && <UploadSVGIcon />}
 *     </div>
 *   );
 * }
 * ```
 *
 * @example
 * Dragging Example
 * ```tsx
 * import { useDropzone, useFileUpload } from "@react-md/core"
 * import type { CSSProperties, ReactElement } from "react";
 *
 * const draggingStyle: CSSProperties = {
 *   backgroundColor: "orange",
 * };
 * const overStyle: CSSProperties = {
 *   border: '1px solid blue',
 * };
 *
 * function Example(): ReactElement {
 *   const { onDrop } = useFileUpload()
 *   const { isOver, isDragging, dropzoneHandlers } = useDropzone({
 *     onDrop(event) {
 *       // normally use the `onDrop` behavior from `useFileUpload` to upload
 *       // files:
 *       // onDrop(event);
 *     },
 *   });
 *
 *   return (
 *     <div
 *       {...dropzoneHandlers}
 *       style={{
 *         ...(isDragging && draggingStyle),
 *         ...(isOver && overStyle),
 *       }}
 *     >
 *       Drag and drop some files!
 *       {isOver && <UploadSVGIcon />}
 *     </div>
 *   );
 * }
 * ```
 *
 * @remarks
 * \@since 2.9.0
 * \@since 6.0.0 Supports document-level dragging flag;
 */ export function useDropzone(options) {
    const { onDrop, onDragOver = noop, onDragEnter = noop, onDragLeave = noop, disableDragging = false } = options;
    const [isOver, setOver] = useState(false);
    const [isDragging, setDragging] = useState(false);
    const draggingTimeout = useRef();
    useEffect(()=>{
        if (disableDragging) {
            return;
        }
        const startDragging = ()=>{
            setDragging(true);
        };
        // Browsers sometimes don't trigger a dragleave event for the entire
        // document, so we have to work around that by using the `dragover` event
        // instead. The `dragover` event will continually fire within the window
        // until the user drops the file or moves the file outside of the window.
        //
        // So we can consider the
        const handler = ()=>{
            window.clearTimeout(draggingTimeout.current);
            draggingTimeout.current = window.setTimeout(()=>{
                setDragging(false);
            }, 100);
        };
        window.addEventListener("dragenter", startDragging);
        window.addEventListener("dragover", handler);
        return ()=>{
            window.clearTimeout(draggingTimeout.current);
            window.removeEventListener("dragenter", startDragging);
            window.removeEventListener("dragover", handler);
        };
    }, [
        disableDragging
    ]);
    return {
        isOver,
        isDragging,
        dropzoneHandlers: {
            // Note: need to call `event.stopPropagation()` and
            // `event.preventDefault())` for each of these handlers to prevent the
            // default browser behavior when dropping. Only calling within `onDrop`
            // does not work.
            //
            // i.e. dropping an image would preview that image in the current
            // window/tab instead of triggering the drop event.
            onDrop (event) {
                event.preventDefault();
                event.stopPropagation();
                window.clearTimeout(draggingTimeout.current);
                onDrop(event);
                setOver(false);
                setDragging(false);
            },
            onDragOver (event) {
                event.preventDefault();
                event.stopPropagation();
                window.clearTimeout(draggingTimeout.current);
                onDragOver(event);
                setOver(true);
            },
            onDragEnter (event) {
                event.preventDefault();
                event.stopPropagation();
                onDragEnter(event);
                setOver(true);
            },
            onDragLeave (event) {
                event.preventDefault();
                event.stopPropagation();
                onDragLeave(event);
                setOver(false);
            }
        }
    };
}

//# sourceMappingURL=useDropzone.js.map