/*---------------------------------------------------------------------------------------------
 * 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, useLayout, } from "@itwin/appui-layout-react";
import { UiFramework } from "../UiFramework";
import { InternalFrontstageManager } from "../frontstage/InternalFrontstageManager";
function EmptyToolSettingsEntry() {
    const toolId = UiFramework.frontstages.activeToolId;
    const toolName = IModelApp.tools.find(toolId)?.flyover;
    const toolPlaceholderName = IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettingsPlaceholderName");
    const labelStringStart = IModelApp.localization.getLocalizedString("UiFramework:tools.noToolSettingsStart");
    const labelStringEnd = 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 */
export function WidgetPanelsToolSettings() {
    const renderDocked = 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);
}
/** @internal */
export 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(DockedToolSettings, { itemId: InternalFrontstageManager.activeToolSettingsProvider?.uniqueId ?? "none", key: forceRefreshKey }, settings &&
        settings.map((entry, index) => (React.createElement(DockedToolSetting, { key: index },
            React.createElement(TsLabel, null, entry.labelNode),
            entry.editorNode)))));
}
/** @internal */
export function useHorizontalToolSettingNodes() {
    const [settings, setSettings] = React.useState(InternalFrontstageManager.activeToolSettingsProvider
        ?.horizontalToolSettingNodes);
    const [emptySettings, setEmptySettings] = React.useState(() => [
        EmptyToolSettingsEntry(),
    ]);
    React.useEffect(() => {
        return UiFramework.frontstages.onToolActivatedEvent.addListener(() => {
            const nodes = InternalFrontstageManager.activeToolSettingsProvider
                ?.horizontalToolSettingNodes;
            setSettings(nodes);
            setEmptySettings([EmptyToolSettingsEntry()]);
        });
    }, [setSettings, setEmptySettings]);
    React.useEffect(() => {
        return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {
            const nodes = InternalFrontstageManager.activeToolSettingsProvider
                ?.horizontalToolSettingNodes;
            setSettings(nodes);
            setEmptySettings([EmptyToolSettingsEntry()]);
        });
    }, [setSettings, setEmptySettings]);
    if (!settings || settings.length === 0)
        return emptySettings;
    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() {
    const [settings, setSettings] = React.useState(InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode);
    React.useEffect(() => {
        const handleToolActivatedEvent = () => {
            const nodes = InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;
            setSettings(nodes);
        };
        UiFramework.frontstages.onToolActivatedEvent.addListener(handleToolActivatedEvent);
        return () => {
            UiFramework.frontstages.onToolActivatedEvent.removeListener(handleToolActivatedEvent);
        };
    }, [setSettings]);
    React.useEffect(() => {
        const handleToolSettingsReloadEvent = () => {
            const nodes = InternalFrontstageManager.activeToolSettingsProvider?.toolSettingsNode;
            setSettings(nodes);
        };
        UiFramework.frontstages.onToolSettingsReloadEvent.addListener(handleToolSettingsReloadEvent);
        return () => {
            UiFramework.frontstages.onToolSettingsReloadEvent.removeListener(handleToolSettingsReloadEvent);
        };
    }, [setSettings]);
    return settings;
}
/** @internal */
export function ToolSettingsContent() {
    const toolSettingsType = 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);
}
/** @internal */
export 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.activeToolSettingsProvider?.uniqueId ?? "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