import React, { useEffect, useState } from "react";
import { FEAGlobals } from "../../../common/Globals";
const AlwaysOnTopIcon = () => (React.createElement("div", { className: "finsemble-icon" },
    React.createElement("svg", { width: "16px", height: "24px", viewBox: "2 0 20 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
        React.createElement("g", { fill: "none", fillRule: "evenodd" },
            React.createElement("g", { fill: "#FFF", fillRule: "nonzero" },
                React.createElement("path", { className: "st0", d: "M9.1,12.4h2.2v3.4c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7v-3.4h2.2c0.5,0,1-0.2,1.4-0.6\n                        c0.4-0.4,0.6-0.8,0.6-1.4v-0.2c0-0.5-0.1-1-0.5-1.4c-0.4-0.4-0.8-0.6-1.4-0.6h-0.3V6c0.4-0.1,0.7-0.3,0.9-0.6\n                        c0.3-0.3,0.4-0.7,0.4-1.2V3.8c0-0.5-0.2-1-0.5-1.3C15,2.2,14.5,2,14,2h-4C9.5,2,9,2.2,8.7,2.5C8.3,2.9,8.1,3.3,8.1,3.8v0.4\n                        c0,0.4,0.1,0.8,0.4,1.2C8.8,5.7,9.1,5.9,9.4,6v2.3H9.1c-0.5,0-1,0.2-1.4,0.6c-0.4,0.4-0.6,0.8-0.6,1.4v0.2c0,0.5,0.2,1,0.6,1.4\n                        C8.1,12.2,8.6,12.4,9.1,12.4z M10.8,9.1V5.4c0-0.4-0.3-0.7-0.7-0.7H10c-0.1,0-0.2,0-0.3-0.2C9.6,4.4,9.5,4.3,9.5,4.2V3.8\n                        c0-0.1,0-0.2,0.2-0.3S9.9,3.3,10,3.3h4c0.2,0,0.3,0,0.4,0.1c0.1,0.1,0.1,0.2,0.1,0.4v0.4c0,0.1,0,0.2-0.2,0.3\n                        c-0.1,0.1-0.2,0.2-0.3,0.2h-0.1c-0.4,0-0.7,0.2-0.7,0.6v3.7c0,0.4,0.3,0.7,0.7,0.7h1c0.2,0,0.3,0.1,0.4,0.2\n                        c0.1,0.1,0.2,0.2,0.2,0.4v0.3c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.3,0.2-0.4,0.2H9.2c-0.2,0-0.3-0.1-0.4-0.2\n                        c-0.1-0.1-0.2-0.2-0.2-0.4v-0.3c0-0.2,0.1-0.3,0.2-0.4C8.9,9.8,9,9.8,9.2,9.8h1C10.6,9.8,10.8,9.5,10.8,9.1z" }),
                React.createElement("path", { className: "st0", d: "M22.8,15.6L18,13.3c-0.2-0.1-0.4-0.1-0.5-0.1c-0.2,0-0.3,0.2-0.4,0.3C17,13.6,17,13.8,17,13.9\n                        c0,0.2,0.1,0.4,0.4,0.5l3.6,1.8l-9.1,4.3L3,16.1l3.5-1.6c0.1,0,0.3-0.1,0.4-0.4c0.1-0.2,0.1-0.4,0-0.5c-0.1-0.2-0.2-0.3-0.4-0.4\n                        c-0.2-0.1-0.4,0-0.5,0l-4.7,2.2c-0.3,0.1-0.4,0.3-0.4,0.6c0,0.3,0.2,0.5,0.4,0.6l10.4,5.1c0.1,0.1,0.2,0.1,0.4,0.1\n                        c0.2,0,0.3-0.1,0.4-0.2l10.5-5.1c0.2-0.1,0.4-0.3,0.4-0.6C23.2,16,23.1,15.7,22.8,15.6z" }))))));
/**
 * Sets always on top for the Toolbar.
 * This button acts as a toggle, enabling and disabling always on top.
 * @param {string} [className] - An optional CSS className to append.
 */
export const AlwaysOnTop = ({ className, children }) => {
    const [showButton, setShowButton] = useState(false);
    const [isAlwaysOnTop, setIsAlwaysOnTop] = useState(false);
    const [wrapperClasses, setWrapperClasses] = useState("finsemble-toolbar-button icon-only");
    const toggleAlwaysOnTop = async () => {
        const newValue = !isAlwaysOnTop;
        await FEAGlobals.FSBL.Clients.WindowClient.setAlwaysOnTop(newValue);
        setIsAlwaysOnTop(newValue);
    };
    // the safe flag to prevent the state updating for the unmounted component
    let isMounted = false;
    let aotRead = false;
    // initialization
    useEffect(() => {
        var _a, _b, _c, _d, _e;
        // sets the flag when the useEffect is first called.
        isMounted = true;
        // checks the config to show or not the AoT button
        if (window.glue42gd) {
            (async () => {
                var _a, _b, _c, _d;
                if (aotRead) {
                    return;
                }
                aotRead = true;
                const { data: config } = await FEAGlobals.FSBL.Clients.LauncherClient.getComponentDefaultConfig("Toolbar");
                const alwaysOnTopIcon = (_d = (_c = (_b = (_a = config === null || config === void 0 ? void 0 : config.foreign) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b["Window Manager"]) === null || _c === void 0 ? void 0 : _c.alwaysOnTopIcon) !== null && _d !== void 0 ? _d : false;
                setShowButton(alwaysOnTopIcon);
            })();
        }
        else {
            const alwaysOnTopIcon = !!((_e = (_d = (_c = (_b = (_a = FEAGlobals.finsembleWindow.windowOptions) === null || _a === void 0 ? void 0 : _a.customData) === null || _b === void 0 ? void 0 : _b.foreign) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d["Window Manager"]) === null || _e === void 0 ? void 0 : _e.alwaysOnTopIcon);
            setShowButton(alwaysOnTopIcon);
        }
        // sets the initial state of the AoT button based on the value from the storage
        (async () => {
            const { data: storageData } = await FEAGlobals.FSBL.Clients.StorageClient.getStandardized({
                topic: FEAGlobals.finsembleWindow.name,
                key: FEAGlobals.finsembleWindow.name,
            });
            isMounted && setIsAlwaysOnTop(!!(storageData === null || storageData === void 0 ? void 0 : storageData.alwaysOnTop));
        })();
        // updates the AoT button state when the alwaysOnTop is changed
        const aotHandler = async (event) => {
            const { data } = event;
            // updates UI
            isMounted && setIsAlwaysOnTop(data.alwaysOnTop);
            // updates the AoT value in the storage
            const { data: storageData } = await FEAGlobals.FSBL.Clients.StorageClient.getStandardized({
                topic: FEAGlobals.finsembleWindow.name,
                key: FEAGlobals.finsembleWindow.name,
            });
            const newValue = { ...storageData, alwaysOnTop: data.alwaysOnTop };
            await FEAGlobals.FSBL.Clients.StorageClient.save({
                topic: FEAGlobals.finsembleWindow.name,
                key: FEAGlobals.finsembleWindow.name,
                value: newValue,
            });
        };
        // listens the config to enable and disable AoT button dynamically
        const configHandler = (err, data) => {
            var _a, _b;
            setShowButton(!!((_b = (_a = data === null || data === void 0 ? void 0 : data.value) === null || _a === void 0 ? void 0 : _a["Window Manager"]) === null || _b === void 0 ? void 0 : _b.alwaysOnTopIcon));
        };
        FEAGlobals.finsembleWindow.addEventListener("alwaysOnTop", aotHandler);
        FEAGlobals.FSBL.Clients.ConfigClient.addListener({ field: "finsemble.components.Toolbar.foreign.components" }, configHandler);
        return () => {
            isMounted = false;
            FEAGlobals.finsembleWindow.removeListener("alwaysOnTop", aotHandler);
            FEAGlobals.FSBL.Clients.ConfigClient.removeListener({ field: "finsemble.components.Toolbar.foreign.components" }, configHandler);
        };
    }, []);
    useEffect(() => {
        setWrapperClasses(`finsemble-toolbar-button icon-only ${className || ""} ${isAlwaysOnTop ? "selected" : ""}`.trim());
    }, [isAlwaysOnTop]);
    const aotButton = (React.createElement("div", { className: wrapperClasses, title: "Always on top", onClick: toggleAlwaysOnTop, tabIndex: 0, role: "button", onKeyDown: (e) => {
            if (["Enter", "Space"].includes(e.key)) {
                toggleAlwaysOnTop();
            }
        } }, children || React.createElement(AlwaysOnTopIcon, null)));
    return showButton ? aotButton : React.createElement(React.Fragment, null);
};
//# sourceMappingURL=AlwaysOnTop.js.map