// disable eslint below because the svg in the icon definition will error if React is not imported
import React, { useEffect, useState } from "react"; // eslint-disable-line
import { useToolbar } from "../../hooks/useToolbar";
import { FEAGlobals } from "../../../common/Globals";
// The default icon for AutoArrange.
const AutoArrangeIcon = () => (React.createElement("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
    React.createElement("g", { id: "Symbols", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
        React.createElement("g", { id: "atoms/icons/auto-arrange", transform: "translate(-9.000000, -9.000000)", fill: "#FFFFFF" },
            React.createElement("g", { id: "Arranged", transform: "translate(9.000000, 9.000000)" },
                React.createElement("path", { d: "M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,1 L1,6 L6,6 L6,1 L1,1 Z", id: "Combined-Shape" }),
                React.createElement("path", { d: "M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M10,1 L10,6 L15,6 L15,1 L10,1 Z", id: "Combined-Shape" }),
                React.createElement("path", { d: "M10,9 L15,9 C15.5522847,9 16,9.44771525 16,10 L16,15 C16,15.5522847 15.5522847,16 15,16 L10,16 C9.44771525,16 9,15.5522847 9,15 L9,10 C9,9.44771525 9.44771525,9 10,9 Z M10,10 L10,15 L15,15 L15,10 L10,10 Z", id: "Combined-Shape" }),
                React.createElement("path", { d: "M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M1,10 L1,15 L6,15 L6,10 L1,10 Z", id: "Combined-Shape" }))))));
/**
 * Makes use of Finsemble's "autoArrange" functionality to organize windows into a grid-like pattern.
 * This button acts as a toggle, arranging and unarranging with subsequent clicks.
 * @param {string} [className] - An optional CSS className to append.
 */
export const AutoArrange = ({ className, children }) => {
    const [isAutoArranged, setIsAutoArranged] = useState(false);
    const [title, setTitle] = useState("Auto Arrange");
    const [wrapperClasses, setWrapperClasses] = useState("finsemble-toolbar-button icon-only");
    const { toggleAutoArrange } = useToolbar();
    FEAGlobals.FSBL.Clients.RouterClient.subscribe("DockingService.AutoArrangeStatus", (err, res) => {
        setIsAutoArranged(!Object.keys(res.data.isAutoArranged).every((key) => !res.data.isAutoArranged[key]));
    });
    useEffect(() => {
        setTitle(isAutoArranged ? "Restore" : "Auto Arrange");
        setWrapperClasses(`finsemble-toolbar-button icon-only ${className || ""} ${isAutoArranged ? "selected" : ""}`.trim());
    }, [isAutoArranged]);
    return (React.createElement("div", { className: wrapperClasses, title: title, onClick: toggleAutoArrange, tabIndex: 0, role: "button", onKeyDown: (e) => {
            if (["Enter", "Space"].includes(e.key)) {
                toggleAutoArrange();
            }
        } }, children || React.createElement(AutoArrangeIcon, null)));
};
//# sourceMappingURL=AutoArrange.js.map