import React, { useContext } from "react";
import { actions } from "../../../platform/services/window/modules/actions";
import { WindowNameContext } from "./WindowTitleBarContext";
import { useDispatch, useSelector } from "react-redux";
export const GroupingButton = () => {
    var _a, _b;
    const dispatch = useDispatch();
    const state = useSelector((currentState) => currentState);
    const windowName = useContext(WindowNameContext);
    const isGrouped = !!(windowName ? (_a = state.windows[windowName]) === null || _a === void 0 ? void 0 : _a.isGrouped : false);
    const groupable = !!(windowName ? (_b = state.windows[windowName]) === null || _b === void 0 ? void 0 : _b.groupable : false);
    if (!groupable)
        return React.createElement(React.Fragment, null);
    const iconClass = `ff-${isGrouped ? "attached" : "detached"}`;
    const wrapClasses = `fsbl-icon fsbl-icon-bordered docking-control${isGrouped ? " fsbl-icon-highlighted" : ""}`;
    const toolTip = isGrouped ? "Detach Window" : "Attach Windows";
    const setGrouped = () => {
        dispatch(actions.setGrouped({
            toggleState: !isGrouped,
        }));
    };
    return (React.createElement("div", { className: wrapClasses, id: "fsbl-window-ejector", title: toolTip, onClick: setGrouped },
        React.createElement("i", { className: iconClass })));
};
//# sourceMappingURL=GroupingButton.js.map