import * as React from "react";
import { useTitle } from "../../hooks";
import { FEAGlobals } from "../../../common/Globals";
import "../../assets/css/menus.css";
const { useEffect } = React;
/**
 * This React component will automatically resize to the height of its DOM content and will hide itself when it loses focus.
 *
 * Note: Set FEAGlobals.FSBL.debug=true in order to override the window hide on blur effect, so that you can debug the window's contents.
 * @param {object} props
 */
export const SystemTrayComponentShell = (props) => {
    var _a;
    useTitle((_a = props.title) !== null && _a !== void 0 ? _a : "System Tray");
    // Add styles to the system tray window's body.
    useEffect(() => {
        document.body.classList.add("system-tray");
        // This points to the parent, in an admittedly unrobust way.
        // Adding these classes gets the tray to have the styling of a menu
        // This could probably be done more elegantly
        const container = document.getElementsByTagName("div")[0];
        container === null || container === void 0 ? void 0 : container.classList.add("menu", "menu-primary");
    }, []);
    // Resize window to fit the DOM height whenever the React children (window contents) change
    useEffect(() => {
        FEAGlobals.FSBL.Clients.WindowClient.fitToDOM();
    }, [props]);
    // Hide window on blur.
    useEffect(() => {
        const hide = () => {
            var _a;
            // If FEAGlobals.FSBL.debug is set to true then bypass hide on blur effect
            if ((_a = FEAGlobals.FSBL) === null || _a === void 0 ? void 0 : _a.debug)
                return;
            // Removes selection highlighting for the item
            const selectedItem = document.querySelector(".menu-item-hover");
            selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.classList.remove("menu-item-hover");
            selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.blur();
            FEAGlobals.finsembleWindow.hide();
        };
        FEAGlobals.finsembleWindow.addEventListener("blurred", hide);
        return () => {
            FEAGlobals.finsembleWindow.removeEventListener("blurred", hide);
        };
    }, []);
    return React.createElement(React.Fragment, null, props.children);
};
//# sourceMappingURL=SystemTrayComponentShell.js.map