"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.WidgetTabsEntryProvider = exports.WidgetTabsEntryContext = exports.WidgetTabs = void 0;
require("./Tabs.scss");
const React = require("react");
const core_bentley_1 = require("@itwin/core-bentley");
const core_react_1 = require("@itwin/core-react");
const NineZone_1 = require("../base/NineZone");
const Docked_1 = require("../tool-settings/Docked");
const Panel_1 = require("../widget-panels/Panel");
const Overflow_1 = require("./Overflow");
const Tab_1 = require("./Tab");
const TitleBarTarget_1 = require("../target/TitleBarTarget");
const LayoutStore_1 = require("../base/LayoutStore");
const Widget_1 = require("./Widget");
const WidgetStateHelpers_1 = require("../state/internal/WidgetStateHelpers");
/** @internal */
function WidgetTabs() {
    const side = React.useContext(Panel_1.PanelSideContext);
    const widgetId = React.useContext(Widget_1.WidgetIdContext);
    const showWidgetIcon = React.useContext(NineZone_1.ShowWidgetIconContext);
    (0, core_bentley_1.assert)(!!widgetId);
    const tabIds = (0, LayoutStore_1.useLayout)((state) => (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId).tabs);
    const activeTabId = (0, LayoutStore_1.useLayout)((state) => (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId).activeTabId);
    const minimized = (0, LayoutStore_1.useLayout)((state) => (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId).minimized);
    const [showOnlyTabIcon, setShowOnlyTabIcon] = React.useState(false);
    const activeTabIndex = tabIds.findIndex((id) => id === activeTabId);
    const children = React.useMemo(() => {
        return tabIds.map((id, index, array) => {
            const firstInactive = activeTabIndex + 1 === index;
            return (React.createElement(Tab_1.WidgetTabProvider, { key: id, id: id, first: index === 0, firstInactive: firstInactive, last: index === array.length - 1, showOnlyTabIcon: showOnlyTabIcon && showWidgetIcon }));
        });
    }, [tabIds, activeTabIndex, showOnlyTabIcon, showWidgetIcon]);
    const [overflown, handleResize, handleOverflowResize, handleEntryResize] = (0, Docked_1.useOverflow)(children, activeTabIndex);
    const horizontal = side && (0, Panel_1.isHorizontalPanelSide)(side);
    const handleContainerResize = React.useCallback((w) => {
        if (showWidgetIcon)
            setShowOnlyTabIcon(tabIds.length * 158 > w); // 158px per text tab
        handleResize && handleResize(w);
    }, [handleResize, showWidgetIcon, tabIds]);
    const ref = (0, core_react_1.useResizeObserver)(handleContainerResize);
    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
    const tabChildren = childrenArray.reduce((acc, child, index) => {
        const key = (0, Docked_1.getChildKey)(child, index);
        if (!overflown) {
            acc.push([key, child]);
            return acc;
        }
        if (horizontal && minimized)
            return acc;
        overflown.indexOf(key) < 0 && acc.push([key, child]);
        return acc;
    }, []);
    const panelChildren = tabChildren.length !== childrenArray.length
        ? childrenArray.map((child, index) => {
            const key = (0, Docked_1.getChildKey)(child, index);
            return [key, child];
        })
        : [];
    return (React.createElement("div", { className: "nz-widget-tabs", ref: ref, role: "tablist" },
        tabChildren.map(([key, child], index, array) => {
            return (React.createElement(WidgetTabsEntryProvider, { children: child, key: key, id: key, lastNotOverflown: index === array.length - 1 && panelChildren.length > 0, getOnResize: handleEntryResize }));
        }),
        React.createElement(TitleBarTarget_1.TitleBarTarget, null),
        React.createElement(Overflow_1.WidgetOverflow, { hidden: overflown && panelChildren.length === 0, onResize: handleOverflowResize }, panelChildren.map(([key, child]) => {
            return React.createElement(React.Fragment, { key: key }, child);
        }))));
}
exports.WidgetTabs = WidgetTabs;
/** @internal */
exports.WidgetTabsEntryContext = React.createContext(undefined);
exports.WidgetTabsEntryContext.displayName = "nz:WidgetTabsEntryContext";
/** @internal */
function WidgetTabsEntryProvider(props) {
    return (React.createElement(exports.WidgetTabsEntryContext.Provider, { value: {
            lastNotOverflown: props.lastNotOverflown,
            onResize: props.getOnResize(props.id),
        } }, props.children));
}
exports.WidgetTabsEntryProvider = WidgetTabsEntryProvider;
//# sourceMappingURL=Tabs.js.map