/*---------------------------------------------------------------------------------------------
 * 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 "./Tabs.scss";
import * as React from "react";
import { assert } from "@itwin/core-bentley";
import { useResizeObserver } from "@itwin/core-react/internal";
import { ShowWidgetIconContext } from "../base/NineZone.js";
import { getChildKey, useOverflow } from "../tool-settings/Docked.js";
import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel.js";
import { WidgetOverflow } from "./Overflow.js";
import { WidgetTabProvider } from "./Tab.js";
import { TitleBarTarget } from "../target/TitleBarTarget.js";
import { useLayout } from "../base/LayoutStore.js";
import { WidgetIdContext } from "./Widget.js";
import { getWidgetState } from "../state/internal/WidgetStateHelpers.js";
/** @internal */
export function WidgetTabs() {
    const side = React.useContext(PanelSideContext);
    const widgetId = React.useContext(WidgetIdContext);
    const showWidgetIcon = React.useContext(ShowWidgetIconContext);
    assert(!!widgetId);
    const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);
    const activeTabId = useLayout((state) => getWidgetState(state, widgetId).activeTabId);
    const minimized = useLayout((state) => 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(WidgetTabProvider, { key: id, id: id, first: index === 0, firstInactive: firstInactive, last: index === array.length - 1, showOnlyTabIcon: showOnlyTabIcon && showWidgetIcon }));
        });
    }, [tabIds, activeTabIndex, showOnlyTabIcon, showWidgetIcon]);
    const childrenKeys = React.Children.toArray(children).map((child, index) => getChildKey(child, index));
    const [overflown, handleResize, handleOverflowResize, handleEntryResize] = useOverflow(childrenKeys, activeTabIndex);
    const horizontal = side && 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 = useResizeObserver(handleContainerResize);
    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
    const tabChildren = childrenArray.reduce((acc, child, index) => {
        const key = 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 = 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, null),
        React.createElement(WidgetOverflow, { hidden: overflown && panelChildren.length === 0, onResize: handleOverflowResize }, panelChildren.map(([key, child]) => {
            return React.createElement(React.Fragment, { key: key }, child);
        }))));
}
/** @internal */
export const WidgetTabsEntryContext = React.createContext(undefined);
WidgetTabsEntryContext.displayName = "nz:WidgetTabsEntryContext";
/** @internal */
export function WidgetTabsEntryProvider(props) {
    return (React.createElement(WidgetTabsEntryContext.Provider, { value: {
            lastNotOverflown: props.lastNotOverflown,
            onResize: props.getOnResize(props.id),
        } }, props.children));
}
//# sourceMappingURL=Tabs.js.map