"use strict";
/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module Widget
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.useHorizontalPanelAlignButton = exports.PreviewHorizontalPanelAlignButton = exports.PreviewHorizontalPanelAlignFeatureProvider = exports.HorizontalPanelAlignContext = void 0;
const React = require("react");
const core_bentley_1 = require("@itwin/core-bentley");
const core_react_1 = require("@itwin/core-react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const Panel_1 = require("../../layout/widget-panels/Panel");
const MoreButton_1 = require("../widget-action-dropdown/MoreButton");
const Button_1 = require("../../layout/widget/Button");
const usePanelWidgetId_1 = require("../../layout/widget/usePanelWidgetId");
const useMaximizedWidget_1 = require("../enable-maximized-widget/useMaximizedWidget");
/** Default value used when not provided or disabled. */
const defaultAlignments = {
    top: core_react_1.HorizontalAlignment.Justify, // eslint-disable-line deprecation/deprecation
    bottom: core_react_1.HorizontalAlignment.Justify, // eslint-disable-line deprecation/deprecation
};
/** @internal */
exports.HorizontalPanelAlignContext = React.createContext({
    enabled: false,
    alignments: defaultAlignments,
    setAlignment: () => { },
});
/** Preview horizontal panel alignment feature provider.
 * @internal
 */
function PreviewHorizontalPanelAlignFeatureProvider({ enabled, children, }) {
    const [alignments, setAlignments] = React.useState({
        top: core_react_1.HorizontalAlignment.Justify, // eslint-disable-line deprecation/deprecation
        bottom: core_react_1.HorizontalAlignment.Justify, // eslint-disable-line deprecation/deprecation
    });
    const setAlignment = React.useCallback(
    // eslint-disable-next-line deprecation/deprecation
    (panel, alignment) => {
        if (!panel || !(0, Panel_1.isHorizontalPanelSide)(panel))
            return;
        setAlignments((prev) => ({
            ...prev,
            [panel]: alignment,
        }));
    }, []);
    return (React.createElement(exports.HorizontalPanelAlignContext.Provider, { value: {
            enabled: !!enabled,
            alignments: enabled ? alignments : defaultAlignments,
            setAlignment,
        } }, children));
}
exports.PreviewHorizontalPanelAlignFeatureProvider = PreviewHorizontalPanelAlignFeatureProvider;
function SvgSide(props) {
    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 16 16", fill: "var(--iui-color-icon-muted, currentColor)", ...props },
        React.createElement("path", { d: "M0 2v12h16V2H0Zm11 7H1V3h10v6Zm4 4h-3V3h3v10Z" })));
}
function SvgJustify(props) {
    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 16 16", fill: "var(--iui-color-icon-muted, currentColor)", ...props },
        React.createElement("path", { d: "M0 2v12h16V2H0Zm4 7H1V3h3v6Zm1 0V3h6v6H5Zm10 0h-3V3h3v6Z" })));
}
function SvgCenter(props) {
    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 16 16", fill: "var(--iui-color-icon-muted, currentColor)", ...props },
        React.createElement("path", { d: "M0 2v12h16V2H0Zm4 11H1V3h3v10Zm1-4V3h6v6H5Zm10 4h-3V3h3v10Z" })));
}
// eslint-disable-next-line deprecation/deprecation
function getIcon(side, alignment) {
    const scaleY = side === "top" ? "-1" : "1";
    // eslint-disable-next-line deprecation/deprecation
    if (alignment === core_react_1.HorizontalAlignment.Justify)
        return React.createElement(SvgJustify, { transform: `scale(1, ${scaleY})` });
    // eslint-disable-next-line deprecation/deprecation
    if (alignment === core_react_1.HorizontalAlignment.Center)
        return React.createElement(SvgCenter, { transform: `scale(1, ${scaleY})` });
    // eslint-disable-next-line deprecation/deprecation
    const scaleX = alignment === core_react_1.HorizontalAlignment.Left ? "1" : "-1";
    return React.createElement(SvgSide, { transform: `scale(${scaleX}, ${scaleY})` });
}
function capitalize(s) {
    return s.charAt(0).toUpperCase() + s.slice(1);
}
/** @internal */
function PreviewHorizontalPanelAlignButton() {
    const side = React.useContext(Panel_1.PanelSideContext);
    (0, core_bentley_1.assert)(!!side);
    (0, core_bentley_1.assert)((0, Panel_1.isHorizontalPanelSide)(side));
    const { alignments, setAlignment } = React.useContext(exports.HorizontalPanelAlignContext);
    const label = "Align panel";
    const getMenuItems = (onClose) => [
        core_react_1.HorizontalAlignment.Justify, // eslint-disable-line deprecation/deprecation
        core_react_1.HorizontalAlignment.Center, // eslint-disable-line deprecation/deprecation
        core_react_1.HorizontalAlignment.Left, // eslint-disable-line deprecation/deprecation
        core_react_1.HorizontalAlignment.Right, // eslint-disable-line deprecation/deprecation
    ].map((align) => {
        return (React.createElement(itwinui_react_1.MenuItem, { key: align, onClick: () => {
                setAlignment(side, align);
                onClose?.();
            }, icon: getIcon(side, align), isSelected: alignments[side] === align }, capitalize(align)));
    });
    const dropdownContext = React.useContext(MoreButton_1.WidgetActionDropdownContext);
    if (dropdownContext !== undefined) {
        return (React.createElement(itwinui_react_1.MenuItem, { icon: getIcon(side, alignments[side]), subMenuItems: getMenuItems(dropdownContext.onClose) }, label));
    }
    return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => getMenuItems(close) },
        React.createElement(Button_1.TabBarButton, { label: label }, getIcon(side, alignments[side]))));
}
exports.PreviewHorizontalPanelAlignButton = PreviewHorizontalPanelAlignButton;
/** @internal */
function useHorizontalPanelAlignButton() {
    const side = React.useContext(Panel_1.PanelSideContext);
    const { enabled } = React.useContext(exports.HorizontalPanelAlignContext);
    const isMainPanelWidget = !!(0, usePanelWidgetId_1.useMainPanelWidgetId)();
    const isMaximizedWidget = (0, useMaximizedWidget_1.useIsMaximizedWidget)();
    if (!side)
        return false;
    const isHorizontalPanel = (0, Panel_1.isHorizontalPanelSide)(side);
    return (enabled && isHorizontalPanel && isMainPanelWidget && !isMaximizedWidget);
}
exports.useHorizontalPanelAlignButton = useHorizontalPanelAlignButton;
//# sourceMappingURL=PreviewHorizontalPanelAlign.js.map