"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 ToolSettings
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolSettingsWidgetContent = exports.ToolSettingsContent = exports.useToolSettingsNode = exports.ToolSettingsGrid = exports.useHorizontalToolSettingNodes = exports.ToolSettingsDockedContent = exports.WidgetPanelsToolSettings = void 0;
require("./ToolSettings.scss");
const React = require("react");
const core_frontend_1 = require("@itwin/core-frontend");
const appui_layout_react_1 = require("@itwin/appui-layout-react");
const UiFramework_1 = require("../UiFramework");
const InternalFrontstageManager_1 = require("../frontstage/InternalFrontstageManager");
function EmptyToolSettingsEntry() {
    const toolId = UiFramework_1.UiFramework.frontstages.activeToolId;
    const toolName = core_frontend_1.IModelApp.tools.find(toolId)?.flyover;
    const toolPlaceholderName = core_frontend_1.IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettingsPlaceholderName");
    const labelStringStart = core_frontend_1.IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettingsStart");
    const labelStringEnd = core_frontend_1.IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettingsEnd");
    const labelNode = (React.createElement("div", { className: "uif-toolsetting-label-docked-horizontal-empty" },
        labelStringStart,
        toolName ? toolName : toolPlaceholderName,
        labelStringEnd));
    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 */
function WidgetPanelsToolSettings() {
    const renderDocked = (0, appui_layout_react_1.useLayout)((state) => {
        const toolSettings = state.toolSettings;
        if (!toolSettings)
            return false;
        if (toolSettings.type === "widget")
            return false;
        return !toolSettings.hidden;
    });
    if (!renderDocked)
        return null;
    return React.createElement(ToolSettingsDockedContent, null);
}
exports.WidgetPanelsToolSettings = WidgetPanelsToolSettings;
/** @internal */
function ToolSettingsDockedContent() {
    const settings = useHorizontalToolSettingNodes();
    const [forceRefreshKey, setForceRefreshKey] = React.useState(Date.now());
    React.useEffect(() => {
        // We cant work with the content of the settings, but we can force refresh when
        // the array is different.
        setForceRefreshKey(Date.now());
    }, [settings]);
    // for the overflow to work properly each setting in the DockedToolSettings should be wrapped by a DockedToolSetting component
    return (React.createElement(appui_layout_react_1.DockedToolSettings, { itemId: InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? "none", key: forceRefreshKey }, settings &&
        settings.map((entry, index) => (React.createElement(appui_layout_react_1.DockedToolSetting, { key: index },
            React.createElement(TsLabel, null, entry.labelNode),
            entry.editorNode)))));
}
exports.ToolSettingsDockedContent = ToolSettingsDockedContent;
/** @internal */
function useHorizontalToolSettingNodes() {
    const [settings, setSettings] = React.useState(InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider
        ?.horizontalToolSettingNodes);
    const [emptySettings, setEmptySettings] = React.useState(() => [
        EmptyToolSettingsEntry(),
    ]);
    React.useEffect(() => {
        return UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(() => {
            const nodes = InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider
                ?.horizontalToolSettingNodes;
            setSettings(nodes);
            setEmptySettings([EmptyToolSettingsEntry()]);
        });
    }, [setSettings, setEmptySettings]);
    React.useEffect(() => {
        return UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {
            const nodes = InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider
                ?.horizontalToolSettingNodes;
            setSettings(nodes);
            setEmptySettings([EmptyToolSettingsEntry()]);
        });
    }, [setSettings, setEmptySettings]);
    if (!settings || settings.length === 0)
        return emptySettings;
    return settings;
}
exports.useHorizontalToolSettingNodes = useHorizontalToolSettingNodes;
/** 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
 */
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));
        })));
}
exports.ToolSettingsGrid = ToolSettingsGrid;
/** @internal */
function useToolSettingsNode() {
    const [settings, setSettings] = React.useState(InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode);
    React.useEffect(() => {
        const handleToolActivatedEvent = () => {
            const nodes = InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;
            setSettings(nodes);
        };
        UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
        return () => {
            UiFramework_1.UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
        };
    }, [setSettings]);
    React.useEffect(() => {
        const handleToolSettingsReloadEvent = () => {
            const nodes = InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;
            setSettings(nodes);
        };
        UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
        return () => {
            UiFramework_1.UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
        };
    }, [setSettings]);
    return settings;
}
exports.useToolSettingsNode = useToolSettingsNode;
/** @internal */
function ToolSettingsContent() {
    const toolSettingsType = (0, appui_layout_react_1.useLayout)((state) => state.toolSettings?.type);
    // This is needed to remount underlying components tree when going into widget state.
    if (!toolSettingsType || toolSettingsType === "docked")
        return null;
    return React.createElement(ToolSettingsWidgetContent, null);
}
exports.ToolSettingsContent = ToolSettingsContent;
/** @internal */
function ToolSettingsWidgetContent() {
    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 = InternalFrontstageManager_1.InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? "none";
    return (React.createElement("div", { "data-toolsettings-provider": providerId, className: "uifw-floating-toolsettings-container", ref: floatingToolSettingsContainerRef },
        React.createElement(appui_layout_react_1.ScrollableWidgetContent, null, node)));
}
exports.ToolSettingsWidgetContent = ToolSettingsWidgetContent;
//# sourceMappingURL=ToolSettings.js.map