import React, { useEffect, useState } from "react";
import { FEAGlobals } from "../../../common/Globals";
import { useDragRegion } from "../../hooks/useDragRegion";
const DragHandleIcon = () => (React.createElement("svg", { width: "5px", height: "15px", viewBox: "0 0 5 11", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
    React.createElement("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", opacity: "0.40", preserveAspectRatio: "xMinYMin meet" },
        React.createElement("path", { d: "M3,0 L2,0 L2,1 L3,1 L3,0 Z M1,2 L0,2 L0,3 L1,3 L1,2 Z M2,2 L3,2 L3,3 L2,3 L2,2 Z M5,2 L4,2 L4,3 L5,3 L5,2 Z M0,4 L1,4 L1,5 L0,5 L0,4 Z M3,4 L2,4 L2,5 L3,5 L3,4 Z M4,4 L5,4 L5,5 L4,5 L4,4 Z M3,6 L2,6 L2,7 L3,7 L3,6 Z M0,6 L1,6 L1,7 L0,7 L0,6 Z M5,6 L4,6 L4,7 L5,7 L5,6 Z M4,8 L5,8 L5,9 L4,9 L4,8 Z M3,8 L2,8 L2,9 L3,9 L3,8 Z M0,8 L1,8 L1,9 L0,9 L0,8 Z M3,10 L2,10 L2,11 L3,11 L3,10 Z", id: "Shape", fill: "#FFFFFF", fillRule: "nonzero" }))));
/**
 * The DOM element that the mouse can grab to move the toolbar around the screen.
 * @param {string} [className] - An optional CSS className to append.
 */
export const DragHandle = ({ className, children }) => {
    const { onMouseDown, onMouseMove } = useDragRegion(false);
    const [useDOMBasedMovement, setDOMBasedMovement] = useState(true);
    const baseCssClass = "cq-drag finsemble-toolbar-drag-handle";
    const wrapperClasses = useDOMBasedMovement
        ? `${baseCssClass} ${className || ""}`.trim()
        : `${baseCssClass}-native-movement ${className || ""}`.trim();
    /**
     * Reports to Finsemble window management that the user has started to drag.
     * @param event
     */
    const handleMouseDown = (event) => {
        if (!useDOMBasedMovement)
            return;
        onMouseDown(event);
    };
    /**
     * Reports to Finsemble window management that the user is dragging.
     * @param event
     */
    const handleMouseMove = (event) => {
        if (!useDOMBasedMovement)
            return;
        onMouseMove(event);
    };
    useEffect(() => {
        async function fetchManifest() {
            const response = await FEAGlobals.FSBL.Clients.ConfigClient.get([
                "finsemble-electron-adapter",
                "useDOMBasedMovement",
            ]);
            const { data: manifestValue } = response;
            if (manifestValue !== undefined && manifestValue !== null)
                setDOMBasedMovement(manifestValue);
        }
        fetchManifest();
    }, []);
    return (React.createElement("span", { className: wrapperClasses, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove }, children || React.createElement(DragHandleIcon, null)));
};
//# sourceMappingURL=DragHandle.js.map