"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { useToggle } from "./useToggle.js";
const noop = ()=>{
// do nothing
};
/**
 * @example Simple Example
 * ```tsx
 * import { useFileUpload } from "@react-md/core/files/useFileUpload";
 * import { useDropzone } from "@react-md/core/useDropzone";
 * import { type CSSProperties, type 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 { useFileUpload } from "@react-md/core/files/useFileUpload";
 * import { useDropzone } from "@react-md/core/useDropzone";
 * import { type CSSProperties, type 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>
 *   );
 * }
 * ```
 *
 * @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 { toggled: isDragging, enable: startDragging, disable: stopDragging } = useToggle();
    const draggingTimeout = useRef();
    // 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.
    const delayedStopDragging = useCallback(()=>{
        window.clearTimeout(draggingTimeout.current);
        draggingTimeout.current = window.setTimeout(()=>{
            stopDragging();
        }, 100);
    }, [
        stopDragging
    ]);
    useEffect(()=>{
        if (disableDragging) {
            return;
        }
        window.addEventListener("dragenter", startDragging);
        window.addEventListener("dragover", delayedStopDragging);
        return ()=>{
            window.clearTimeout(draggingTimeout.current);
            window.removeEventListener("dragenter", startDragging);
            window.removeEventListener("dragover", delayedStopDragging);
        };
    }, [
        delayedStopDragging,
        disableDragging,
        startDragging
    ]);
    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);
                stopDragging();
            },
            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);
                // this stops dragging if the user's File Explorer is somewhat above the dropzone
                // and drags out into the File Explorer
                delayedStopDragging();
            }
        }
    };
}

//# sourceMappingURL=useDropzone.js.map