/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module ToolSettings
 */
import "./ToolSettings.scss";
import * as React from "react";
import { IModelApp } from "@itwin/core-frontend";
import { DockedToolSetting, DockedToolSettings, ScrollableWidgetContent, ToolSettingsStateContext } from "@itwin/appui-layout-react";
import { useActiveFrontstageDef } from "../frontstage/Frontstage";
import { UiFramework } from "../UiFramework";
import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
function EmptyToolSettingsEntry() {
    const labelString = IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettings");
    const labelNode = React.createElement("div", { className: "uif-toolsetting-label-docked-horizontal-empty" }, labelString);
    const editorNode = React.createElement("div", null);
    return { labelNode, editorNode };
}
/** @internal */
// istanbul ignore next - need to work on overflow unit testing
function TsLabel({ children }) {
    return React.createElement("div", { className: "uif-toolsetting-label-docked-horizontal" }, children);
}
/** @internal */
export function WidgetPanelsToolSettings() {
    const frontstageDef = useActiveFrontstageDef();
    const toolSettings = React.useContext(ToolSettingsStateContext);
    const topCenterZone = frontstageDef === null || frontstageDef === void 0 ? void 0 : frontstageDef.topCenter; // eslint-disable-line deprecation/deprecation
    if (!topCenterZone || !topCenterZone.isToolSettings || toolSettings.type === "widget")
        return null;
    return (React.createElement(ToolSettingsDockedContent, null));
}
/** @internal */
export function ToolSettingsDockedContent() {
    var _a, _b;
    const settings = useHorizontalToolSettingNodes();
    // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component
    return (React.createElement(DockedToolSettings, { itemId: (_b = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.uniqueId) !== null && _b !== void 0 ? _b : "none", key: Date.now() }, settings && settings.map((entry, index) => React.createElement(DockedToolSetting, { key: index },
        React.createElement(TsLabel, null, entry.labelNode),
        entry.editorNode))));
}
/** @internal */
export function useHorizontalToolSettingNodes() {
    var _a;
    const [settings, setSettings] = React.useState((_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes);
    React.useEffect(() => {
        const handleToolActivatedEvent = () => {
            var _a;
            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
            if (!nodes || nodes.length === 0)
                setSettings([EmptyToolSettingsEntry()]);
            else
                setSettings(nodes);
        };
        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
        return () => {
            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
        };
    }, [setSettings]);
    React.useEffect(() => {
        const handleToolSettingsReloadEvent = () => {
            var _a;
            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.horizontalToolSettingNodes;
            if (!nodes || nodes.length === 0)
                setSettings([EmptyToolSettingsEntry()]);
            else
                setSettings(nodes);
        };
        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
        return () => {
            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
        };
    }, [setSettings]);
    return settings;
}
/** Component that arranges an array of ToolSettingsEntry items into a two column grid layout.
 * The left column is considered the label column, the right column is considered the property
 * editor column.
 * @internal
 */
export function ToolSettingsGrid({ settings }) {
    return (React.createElement("div", { className: "uifw-standard-toolsettings-two-column-grid" }, settings && settings.map((setting, index) => {
        return (React.createElement(React.Fragment, { key: index },
            React.createElement("span", { className: "uifw-standard-toolsettings-label-entry" }, setting.labelNode),
            setting.editorNode));
    })));
}
/** @internal */
export function useToolSettingsNode() {
    var _a;
    const [settings, setSettings] = React.useState((_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode);
    React.useEffect(() => {
        const handleToolActivatedEvent = () => {
            var _a;
            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
            setSettings(nodes);
        };
        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
        return () => {
            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
        };
    }, [setSettings]);
    React.useEffect(() => {
        const handleToolSettingsReloadEvent = () => {
            var _a;
            const nodes = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.toolSettingsNode;
            setSettings(nodes);
        };
        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
        return () => {
            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
        };
    }, [setSettings]);
    return settings;
}
/** @internal */
export function ToolSettingsContent() {
    const toolSettings = React.useContext(ToolSettingsStateContext);
    // This is needed to remount underlying components tree when going into widget state.
    if (toolSettings.type === "docked")
        return null;
    return React.createElement(ToolSettingsWidgetContent, null);
}
/** @internal */
export function ToolSettingsWidgetContent() {
    var _a, _b;
    const floatingToolSettingsContainerRef = React.useRef(null);
    const node = useToolSettingsNode();
    // if no tool settings hide the floating widgets tab
    React.useEffect(() => {
        // istanbul ignore else
        if (floatingToolSettingsContainerRef.current) {
            const floatingWidgetTab = floatingToolSettingsContainerRef.current.closest(".nz-floating-toolsettings");
            // istanbul ignore else
            if (floatingWidgetTab) {
                floatingWidgetTab.style.visibility = !!node ? "visible" : /* istanbul ignore next */ "hidden";
            }
        }
    }, [node]);
    // istanbul ignore next
    const providerId = (_b = (_a = InternalFrontstageManager.activeToolSettingsProvider) === null || _a === void 0 ? void 0 : _a.uniqueId) !== null && _b !== void 0 ? _b : "none";
    return (React.createElement("div", { "data-toolsettings-provider": providerId, className: "uifw-floating-toolsettings-container", ref: floatingToolSettingsContainerRef },
        React.createElement(ScrollableWidgetContent, null, node)));
}
//# sourceMappingURL=ToolSettings.js.map