/*---------------------------------------------------------------------------------------------
 * 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
 */
import * as React from "react";
import { assert } from "@itwin/core-bentley";
import { HorizontalAlignment } from "@itwin/core-react";
import { DropdownMenu, MenuItem } from "@itwin/itwinui-react";
import { isHorizontalPanelSide, PanelSideContext, } from "../../layout/widget-panels/Panel.js";
import { WidgetActionDropdownContext } from "../widget-action-dropdown/MoreButton.js";
import { TabBarButton } from "../../layout/widget/Button.js";
import { useMainPanelWidgetId } from "../../layout/widget/usePanelWidgetId.js";
import { useIsMaximizedWidget } from "../enable-maximized-widget/useMaximizedWidget.js";
/** Default value used when not provided or disabled. */
const defaultAlignments = {
    top: HorizontalAlignment.Justify, // eslint-disable-line @typescript-eslint/no-deprecated
    bottom: HorizontalAlignment.Justify, // eslint-disable-line @typescript-eslint/no-deprecated
};
/** @internal */
export const HorizontalPanelAlignContext = React.createContext({
    enabled: false,
    alignments: defaultAlignments,
    setAlignment: () => { },
});
/** Preview horizontal panel alignment feature provider.
 * @internal
 */
export function PreviewHorizontalPanelAlignFeatureProvider({ enabled, children, }) {
    const [alignments, setAlignments] = React.useState({
        top: HorizontalAlignment.Justify, // eslint-disable-line @typescript-eslint/no-deprecated
        bottom: HorizontalAlignment.Justify, // eslint-disable-line @typescript-eslint/no-deprecated
    });
    const setAlignment = React.useCallback(
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    (panel, alignment) => {
        if (!panel || !isHorizontalPanelSide(panel))
            return;
        setAlignments((prev) => ({
            ...prev,
            [panel]: alignment,
        }));
    }, []);
    return (React.createElement(HorizontalPanelAlignContext.Provider, { value: {
            enabled: !!enabled,
            alignments: enabled ? alignments : defaultAlignments,
            setAlignment,
        } }, children));
}
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 @typescript-eslint/no-deprecated
function getIcon(side, alignment) {
    const scaleY = side === "top" ? "-1" : "1";
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    if (alignment === HorizontalAlignment.Justify)
        return React.createElement(SvgJustify, { transform: `scale(1, ${scaleY})` });
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    if (alignment === HorizontalAlignment.Center)
        return React.createElement(SvgCenter, { transform: `scale(1, ${scaleY})` });
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    const scaleX = alignment === HorizontalAlignment.Left ? "1" : "-1";
    return React.createElement(SvgSide, { transform: `scale(${scaleX}, ${scaleY})` });
}
function capitalize(s) {
    return s.charAt(0).toUpperCase() + s.slice(1);
}
/** @internal */
export function PreviewHorizontalPanelAlignButton() {
    const side = React.useContext(PanelSideContext);
    assert(!!side);
    assert(isHorizontalPanelSide(side));
    const { alignments, setAlignment } = React.useContext(HorizontalPanelAlignContext);
    const label = "Align panel";
    const getMenuItems = (onClose) => [
        HorizontalAlignment.Justify, // eslint-disable-line @typescript-eslint/no-deprecated
        HorizontalAlignment.Center, // eslint-disable-line @typescript-eslint/no-deprecated
        HorizontalAlignment.Left, // eslint-disable-line @typescript-eslint/no-deprecated
        HorizontalAlignment.Right, // eslint-disable-line @typescript-eslint/no-deprecated
    ].map((align) => {
        return (React.createElement(MenuItem, { key: align, onClick: () => {
                setAlignment(side, align);
                onClose?.();
            }, 
            // eslint-disable-next-line @typescript-eslint/no-deprecated
            icon: getIcon(side, align), isSelected: alignments[side] === align }, capitalize(align)));
    });
    const dropdownContext = React.useContext(WidgetActionDropdownContext);
    if (dropdownContext !== undefined) {
        return (React.createElement(MenuItem
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        , { 
            // eslint-disable-next-line @typescript-eslint/no-deprecated
            icon: getIcon(side, alignments[side]), subMenuItems: getMenuItems(dropdownContext.onClose) }, label));
    }
    return (React.createElement(DropdownMenu, { menuItems: (close) => getMenuItems(close) },
        React.createElement(TabBarButton, { label: label }, getIcon(side, alignments[side]))));
}
/** @internal */
export function useHorizontalPanelAlignButton() {
    const side = React.useContext(PanelSideContext);
    const { enabled } = React.useContext(HorizontalPanelAlignContext);
    const isMainPanelWidget = !!useMainPanelWidgetId();
    const isMaximizedWidget = useIsMaximizedWidget();
    if (!side)
        return false;
    const isHorizontalPanel = isHorizontalPanelSide(side);
    return (enabled && isHorizontalPanel && isMainPanelWidget && !isMaximizedWidget);
}
//# sourceMappingURL=PreviewHorizontalPanelAlign.js.map