import React, { useEffect } from "react";
import { useToolbar } from "../../hooks/useToolbar";
import { useHotkey } from "../../hooks/useHotkey";
import { useTitle } from "../../hooks/useTitle";
import { SddButton } from "./SddButton";
import { FEAGlobals } from "../../../common/Globals";
import "../../assets/css/toolbar.css";
/**
 * The ToolbarShell registers hotkeys, communicates with Finsemble core, sets up the toolbar size, and provides other functions of the Finsemble toolbar.
 * @param hotkeyShow [array<string>] - A hotkey combination to show the toolbar
 * @param hotkeyHide [array<string>] - A hotkey combination to hide the toolbar
 */
export const ToolbarShell = ({ hotkeyShow, hotkeyHide, hotkeyDock, hotkeyMinimizeAll, hotkeyBringWindowsToFront, hotkeyRestartApplication, title = "Toolbar", children, }) => {
    const { hideToolbar, showToolbar, dockToolbar } = useToolbar();
    useHotkey(hotkeyShow, showToolbar);
    useHotkey(hotkeyHide, hideToolbar);
    useHotkey(hotkeyDock, dockToolbar);
    useHotkey(hotkeyRestartApplication, FEAGlobals.FSBL.restartApplication);
    useHotkey(hotkeyBringWindowsToFront, FEAGlobals.FSBL.Clients.LauncherClient.bringWindowsToFront);
    useHotkey(hotkeyMinimizeAll, FEAGlobals.FSBL.Clients.WorkspaceClient.minimizeAll);
    useTitle(title);
    // Add styles to the toolbar window's body.
    useEffect(() => {
        document.body.classList.add("finsemble-toolbar-body");
        if (globalThis.glue42gd) {
            const draggables = document.getElementsByClassName("cq-drag");
            for (let i = 0; i < draggables.length; i++) {
                draggables[i].style.setProperty("-webkit-app-region", "drag");
            }
        }
    }, []);
    return (React.createElement("div", { className: "finsemble-toolbar" },
        children,
        React.createElement(SddButton, null)));
};
//# sourceMappingURL=ToolbarShell.js.map