"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 WidgetPanels
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.panelSides = exports.isHorizontalPanelSide = exports.WidgetPanelContext = exports.PanelSideContext = exports.WidgetPanel = exports.WidgetPanelProvider = void 0;
require("./Panel.scss");
const core_bentley_1 = require("@itwin/core-bentley");
const core_react_1 = require("@itwin/core-react");
const classnames_1 = require("classnames");
const React = require("react");
const DragManager_1 = require("../base/DragManager");
const LayoutStore_1 = require("../base/LayoutStore");
const PanelOutline_1 = require("../outline/PanelOutline");
const SectionOutline_1 = require("../outline/SectionOutline");
const PanelState_1 = require("../state/PanelState");
const PanelTargets_1 = require("../target/PanelTargets");
const SectionTargets_1 = require("../target/SectionTargets");
const Grip_1 = require("./Grip");
const PanelSections_1 = require("./PanelSections");
const useAnimatePanel_1 = require("./useAnimatePanel");
const useMaximizedWidget_1 = require("../../preview/enable-maximized-widget/useMaximizedWidget");
/** Widget panel component is a side panel with multiple widgets.
 * @internal
 */
function WidgetPanelProvider({ side }) {
    const hasWidgets = (0, LayoutStore_1.useLayout)((state) => state.panels[side].widgets.length > 0);
    return (React.createElement(exports.PanelSideContext.Provider, { value: side },
        React.createElement("div", { className: "nz-widgetPanels_panelContainer" },
            hasWidgets && React.createElement(WidgetPanel, null),
            React.createElement(PanelTargets_1.PanelTargets, null),
            React.createElement(PanelOutline_1.PanelOutline, null))));
}
exports.WidgetPanelProvider = WidgetPanelProvider;
/** @internal */
function WidgetPanel() {
    const side = React.useContext(exports.PanelSideContext);
    const draggedPanelSide = React.useContext(DragManager_1.DraggedPanelSideContext);
    (0, core_bentley_1.assert)(!!side);
    const maximizedPanel = (0, useMaximizedWidget_1.useMaximizedPanel)(side);
    const spanTop = (0, LayoutStore_1.useLayout)((state) => state.panels.top.span);
    const spanBottom = (0, LayoutStore_1.useLayout)((state) => state.panels.bottom.span);
    const panel = (0, LayoutStore_1.useLayout)((state) => {
        const p = state.panels[side];
        const span = (0, PanelState_1.isHorizontalPanelState)(p) ? p.span : false;
        return {
            collapsed: p.collapsed,
            widgets: p.widgets,
            resizable: p.resizable,
            span,
        };
    }, true);
    const { handleTransitionEnd, size, contentSize, transition, ref: panelRef, } = (0, useAnimatePanel_1.useAnimatePanel)();
    const isHorizontal = (0, exports.isHorizontalPanelSide)(side);
    const style = React.useMemo(() => {
        if (isHorizontal)
            return {
                height: `${size}px`,
            };
        return {
            width: `${size}px`,
        };
    }, [size, isHorizontal]);
    const contentStyle = React.useMemo(() => {
        if (contentSize === undefined)
            return undefined;
        if (isHorizontal)
            return {
                minHeight: `${contentSize}px`,
            };
        return {
            minWidth: `${contentSize}px`,
        };
    }, [contentSize, isHorizontal]);
    const elementRef = React.useRef(null);
    const getBounds = React.useCallback(() => {
        (0, core_bentley_1.assert)(!!elementRef.current);
        return elementRef.current.getBoundingClientRect();
    }, []);
    const widgetPanel = React.useMemo(() => {
        return {
            getBounds,
        };
    }, [getBounds]);
    const captured = draggedPanelSide === side;
    const className = (0, classnames_1.default)("nz-widgetPanels-panel", `nz-${side}`, panel.collapsed && "nz-collapsed", captured && "nz-captured", panel.span && "nz-span", spanTop && "nz-span-top", spanBottom && "nz-span-bottom", transition && `nz-${transition}`, maximizedPanel);
    const singleSection = panel.widgets.length === 1;
    const showSectionTargets = singleSection && !panel.collapsed;
    const ref = (0, core_react_1.useRefs)(elementRef, panelRef);
    return (React.createElement(exports.WidgetPanelContext.Provider, { value: widgetPanel },
        React.createElement("div", { className: className, ref: ref, style: maximizedPanel ? {} : style, onTransitionEnd: handleTransitionEnd },
            React.createElement("div", { className: "nz-content", style: maximizedPanel ? {} : contentStyle },
                singleSection && React.createElement(SectionOutline_1.SectionOutline, { sectionIndex: 0 }),
                React.createElement(PanelSections_1.PanelSections, null),
                singleSection && React.createElement(SectionOutline_1.SectionOutline, { sectionIndex: 1 })),
            showSectionTargets && React.createElement(SectionTargets_1.SectionTargets, { widgetId: panel.widgets[0] }),
            panel.resizable && (React.createElement("div", { className: "nz-grip-container" },
                React.createElement(Grip_1.WidgetPanelGrip, { className: "nz-grip" }))))));
}
exports.WidgetPanel = WidgetPanel;
/** @internal */
exports.PanelSideContext = React.createContext(undefined);
exports.PanelSideContext.displayName = "nz:PanelSideContext";
/** @internal */
exports.WidgetPanelContext = React.createContext(undefined);
exports.WidgetPanelContext.displayName = "nz:WidgetPanelContext";
/** @internal */
const isHorizontalPanelSide = (side) => {
    return side === "top" || side === "bottom";
};
exports.isHorizontalPanelSide = isHorizontalPanelSide;
/** @internal */
exports.panelSides = ["left", "right", "top", "bottom"];
//# sourceMappingURL=Panel.js.map