"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.PanelSections = void 0;
require("./PanelSections.scss");
const classnames_1 = require("classnames");
const React = require("react");
const core_bentley_1 = require("@itwin/core-bentley");
const NineZone_1 = require("../base/NineZone");
const PanelWidget_1 = require("../widget/PanelWidget");
const LayoutStore_1 = require("../base/LayoutStore");
const Panel_1 = require("./Panel");
const useMaximizedWidget_1 = require("../../preview/enable-maximized-widget/useMaximizedWidget");
function PanelSplitter() {
    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
    const side = React.useContext(Panel_1.PanelSideContext);
    (0, core_bentley_1.assert)(!!side);
    const containerRef = React.useRef(null);
    const splitterProcessingActiveRef = React.useRef(false);
    const isHorizontal = (0, Panel_1.isHorizontalPanelSide)(side);
    const getPercentage = React.useCallback((min, max, current) => {
        const range = max - min;
        const adjusted = Math.max(min, Math.min(max, current));
        if (adjusted === min)
            return 0;
        if (adjusted === max)
            return 100;
        const percent = ((adjusted - min) * 100) / range;
        return percent;
    }, []);
    const updatePanelSize = React.useCallback((event) => {
        if (!containerRef.current)
            return;
        const parentPanel = containerRef.current.closest(".nz-widgetPanels-panel");
        const sectionToResize = containerRef.current.parentElement;
        if (parentPanel && sectionToResize) {
            const rect = parentPanel.getBoundingClientRect();
            const percent = getPercentage(isHorizontal ? rect.left : rect.top, isHorizontal ? rect.right : rect.bottom, isHorizontal ? event.clientX : event.clientY);
            dispatch({
                type: "PANEL_SET_SPLITTER_VALUE",
                side,
                percent,
            });
        }
    }, [getPercentage, isHorizontal, side, dispatch]);
    const handlePointerMove = React.useCallback((event) => {
        if (splitterProcessingActiveRef.current) {
            event.preventDefault();
            event.stopPropagation();
            updatePanelSize(event);
        }
    }, [updatePanelSize]);
    const handlePointerUp = React.useCallback((event) => {
        updatePanelSize(event);
        event.preventDefault();
        event.stopPropagation();
        containerRef.current?.ownerDocument.removeEventListener("pointermove", handlePointerMove);
        containerRef.current?.ownerDocument.removeEventListener("pointerup", handlePointerUp);
    }, [handlePointerMove, updatePanelSize]);
    const handlePointerDownOnSplitter = React.useCallback((event) => {
        if (containerRef.current) {
            containerRef.current?.ownerDocument.addEventListener("pointermove", handlePointerMove);
            containerRef.current?.ownerDocument.addEventListener("pointerup", handlePointerUp);
            splitterProcessingActiveRef.current = true;
            event.preventDefault();
            event.stopPropagation();
        }
    }, [handlePointerMove, handlePointerUp]);
    const className = isHorizontal
        ? "nz-horizontal-panel-splitter"
        : "nz-vertical-panel-splitter";
    return (React.createElement("div", { ref: containerRef, className: className, onPointerDown: handlePointerDownOnSplitter }));
}
/** @internal */
function PanelSections() {
    const side = React.useContext(Panel_1.PanelSideContext);
    (0, core_bentley_1.assert)(!!side);
    const widgets = (0, LayoutStore_1.useLayout)((state) => {
        return state.panels[side].widgets;
    });
    return (React.createElement(React.Fragment, null, widgets.map((widgetId, index, array) => {
        return (React.createElement(PanelSection, { key: widgetId, widgetId: widgetId, index: index, sectionLength: array.length }));
    })));
}
exports.PanelSections = PanelSections;
function PanelSection({ widgetId, index, sectionLength }) {
    const side = React.useContext(Panel_1.PanelSideContext);
    (0, core_bentley_1.assert)(!!side);
    const splitterPercent = (0, LayoutStore_1.useLayout)((state) => {
        return state.panels[side].splitterPercent ?? 50;
    });
    const maximizedSection = (0, useMaximizedWidget_1.useMaximizedSection)(widgetId);
    const isMaximizedPanel = !!(0, useMaximizedWidget_1.useMaximizedPanel)(side);
    const isHorizontal = (0, Panel_1.isHorizontalPanelSide)(side);
    const last = index === sectionLength - 1;
    const className = (0, classnames_1.default)("nz-widgetPanels-panelSections_section", `nz-panel-section-${index}`, isHorizontal ? "nz-widgetPanels-horizontal" : "nz-widgetPanels-vertical", last && 0 === index && "nz-panel-section-full-size", maximizedSection);
    const hasSplitter = !last && 0 === index && !isMaximizedPanel;
    const panelStyle = hasSplitter
        ? getSplitterStyle(isHorizontal, splitterPercent)
        : undefined;
    return (React.createElement("div", { className: className, style: panelStyle },
        React.createElement(PanelWidget_1.PanelWidget, { widgetId: widgetId }),
        hasSplitter && React.createElement(PanelSplitter, null)));
}
function getSplitterStyle(isHorizontal, splitterPercent) {
    if (isHorizontal) {
        return {
            width: `${splitterPercent}%`,
        };
    }
    return {
        height: `${splitterPercent}%`,
    };
}
//# sourceMappingURL=PanelSections.js.map