/*---------------------------------------------------------------------------------------------
 * 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
 */
import "./Panel.scss";
import { assert } from "@itwin/core-bentley";
import { useRefs } from "@itwin/core-react";
import classnames from "classnames";
import * as React from "react";
import { DraggedPanelSideContext } from "../base/DragManager";
import { useLayout } from "../base/LayoutStore";
import { PanelOutline } from "../outline/PanelOutline";
import { SectionOutline } from "../outline/SectionOutline";
import { isHorizontalPanelState } from "../state/PanelState";
import { PanelTargets } from "../target/PanelTargets";
import { SectionTargets } from "../target/SectionTargets";
import { WidgetPanelGrip } from "./Grip";
import { PanelSections } from "./PanelSections";
import { useAnimatePanel } from "./useAnimatePanel";
import { useMaximizedPanel } from "../../preview/enable-maximized-widget/useMaximizedWidget";
/** Widget panel component is a side panel with multiple widgets.
 * @internal
 */
export function WidgetPanelProvider({ side }) {
    const hasWidgets = useLayout((state) => state.panels[side].widgets.length > 0);
    return (React.createElement(PanelSideContext.Provider, { value: side },
        React.createElement("div", { className: "nz-widgetPanels_panelContainer" },
            hasWidgets && React.createElement(WidgetPanel, null),
            React.createElement(PanelTargets, null),
            React.createElement(PanelOutline, null))));
}
/** @internal */
export function WidgetPanel() {
    const side = React.useContext(PanelSideContext);
    const draggedPanelSide = React.useContext(DraggedPanelSideContext);
    assert(!!side);
    const maximizedPanel = useMaximizedPanel(side);
    const spanTop = useLayout((state) => state.panels.top.span);
    const spanBottom = useLayout((state) => state.panels.bottom.span);
    const panel = useLayout((state) => {
        const p = state.panels[side];
        const span = isHorizontalPanelState(p) ? p.span : false;
        return {
            collapsed: p.collapsed,
            widgets: p.widgets,
            resizable: p.resizable,
            span,
        };
    }, true);
    const { handleTransitionEnd, size, contentSize, transition, ref: panelRef, } = useAnimatePanel();
    const isHorizontal = 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(() => {
        assert(!!elementRef.current);
        return elementRef.current.getBoundingClientRect();
    }, []);
    const widgetPanel = React.useMemo(() => {
        return {
            getBounds,
        };
    }, [getBounds]);
    const captured = draggedPanelSide === side;
    const className = classnames("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 = useRefs(elementRef, panelRef);
    return (React.createElement(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, { sectionIndex: 0 }),
                React.createElement(PanelSections, null),
                singleSection && React.createElement(SectionOutline, { sectionIndex: 1 })),
            showSectionTargets && React.createElement(SectionTargets, { widgetId: panel.widgets[0] }),
            panel.resizable && (React.createElement("div", { className: "nz-grip-container" },
                React.createElement(WidgetPanelGrip, { className: "nz-grip" }))))));
}
/** @internal */
export const PanelSideContext = React.createContext(undefined);
PanelSideContext.displayName = "nz:PanelSideContext";
/** @internal */
export const WidgetPanelContext = React.createContext(undefined);
WidgetPanelContext.displayName = "nz:WidgetPanelContext";
/** @internal */
export const isHorizontalPanelSide = (side) => {
    return side === "top" || side === "bottom";
};
/** @internal */
export const panelSides = ["left", "right", "top", "bottom"];
//# sourceMappingURL=Panel.js.map