"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 Settings
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.getUiSettingsManagerEntry = exports.UiSettingsPage = void 0;
// cSpell:ignore configurableui checkmark
const window_settings_svg_1 = require("@bentley/icons-generic/icons/window-settings.svg");
require("./UiSettingsPage.scss");
const React = require("react");
const UiFramework_1 = require("../../UiFramework");
const ThemeManager_1 = require("../../theme/ThemeManager");
const SyncUiEventDispatcher_1 = require("../../syncui/SyncUiEventDispatcher");
const appui_abstract_1 = require("@itwin/appui-abstract");
const itwinui_react_1 = require("@itwin/itwinui-react");
/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.
 *
 * - theme - Dark, Light, or based on OS preference.
 * - auto hide - Starts a timer and blanks out ui components that overlay content if there is no mouse movement for a period of time.
 * - drag interaction - If set, toolbar group buttons require a press and drag or a long press to open. In this mode a child action
 * item is shown as the group button and is activated when button is clicked. If a different child item is selected, it becomes the
 * active group button item.
 * - use proximity - Changes the opacity of toolbar from transparent to opaque as the mouse moves closer.
 * - snap widget opacity - triggers an abrupt change from transparent to opaque for tool and navigation widgets, instead of a gradual change based on mouse location.
 * - widget opacity - determines how transparent floating widgets in V2 and all widgets in V1 become when the mouse in not in them.
 * - UI version - if allowed by props, the UI version can be toggled between V1 and V2.
 *
 * @beta
 */
function UiSettingsPage() {
    const themeTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.themeTitle"));
    const themeDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.themeDescription"));
    const autoHideTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoHideTitle"));
    const autoHideDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoHideDescription"));
    const dragInteractionTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dragInteractionTitle"));
    const dragInteractionDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dragInteractionDescription"));
    const useProximityOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useProximityOpacityTitle"));
    const useProximityOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useProximityOpacityDescription"));
    const snapWidgetOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityTitle"));
    const snapWidgetOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityDescription"));
    const darkLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.dark"));
    const lightLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.light"));
    const systemPreferredLabel = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.systemPreferred"));
    const widgetOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetOpacityTitle"));
    const widgetOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetOpacityDescription"));
    const widgetIconTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetIconTitle"));
    const widgetIconDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.widgetIconDescription"));
    const autoCollapseUnpinnedPanelsTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"));
    const autoCollapseUnpinnedPanelsDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"));
    const animateToolSettingsTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.animateToolSettingsTitle"));
    const animateToolSettingsDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.animateToolSettingsDescription"));
    const useToolAsToolSettingsLabelTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"));
    const useToolAsToolSettingsLabelDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"));
    const toolbarOpacityTitle = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.toolbarOpacityTitle"));
    const toolbarOpacityDescription = React.useRef(UiFramework_1.UiFramework.translate("settings.uiSettingsPage.toolbarOpacityDescription"));
    const [theme, setTheme] = React.useState(() => UiFramework_1.UiFramework.getColorTheme());
    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework_1.UiFramework.useDragInteraction);
    const [showWidgetIcon, setShowWidgetIcon] = React.useState(() => UiFramework_1.UiFramework.showWidgetIcon);
    const [autoCollapseUnpinnedPanels, setAutoCollapseUnpinnedPanels] = React.useState(() => UiFramework_1.UiFramework.autoCollapseUnpinnedPanels);
    const [animateToolSettings, setAnimateToolSettings] = React.useState(() => UiFramework_1.UiFramework.animateToolSettings);
    const [useToolAsToolSettingsLabel, setUseToolAsToolSettingsLabel] = React.useState(() => UiFramework_1.UiFramework.useToolAsToolSettingsLabel);
    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework_1.UiFramework.getWidgetOpacity());
    const [autoHideUi, setAutoHideUi] = React.useState(() => UiFramework_1.UiFramework.visibility.autoHideUi);
    const [useProximityOpacity, setUseProximityOpacity] = React.useState(() => UiFramework_1.UiFramework.visibility.useProximityOpacity);
    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework_1.UiFramework.visibility.snapWidgetOpacity);
    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => UiFramework_1.UiFramework.getToolbarOpacity());
    React.useEffect(() => {
        const syncIdsOfInterest = [
            "configurableui:set_theme",
            "configurableui:set_widget_opacity",
            "configurableui:set-show-widget-icon",
            "configurableui:set-drag-interaction",
            "configurableui:set-framework-version",
            "configurableui:set-auto-collapse-unpinned-panels",
            "configurableui:set-animate-tool-settings",
            "configurableui:set-use-tool-as-tool-settings-label",
            "configurableui:set-toolbar-opacity",
            SyncUiEventDispatcher_1.SyncUiEventId.ShowHideManagerSettingChange,
        ];
        const handleSyncUiEvent = (args) => {
            // istanbul ignore else
            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
                if (UiFramework_1.UiFramework.getColorTheme() !== theme)
                    setTheme(UiFramework_1.UiFramework.getColorTheme());
                if (UiFramework_1.UiFramework.visibility.autoHideUi !== autoHideUi)
                    setAutoHideUi(UiFramework_1.UiFramework.visibility.autoHideUi);
                if (UiFramework_1.UiFramework.useDragInteraction !== useDragInteraction)
                    setUseDragInteraction(UiFramework_1.UiFramework.useDragInteraction);
                if (UiFramework_1.UiFramework.showWidgetIcon !== showWidgetIcon)
                    setShowWidgetIcon(UiFramework_1.UiFramework.showWidgetIcon);
                if (UiFramework_1.UiFramework.autoCollapseUnpinnedPanels !== autoCollapseUnpinnedPanels)
                    setAutoCollapseUnpinnedPanels(UiFramework_1.UiFramework.autoCollapseUnpinnedPanels);
                if (UiFramework_1.UiFramework.getWidgetOpacity() !== widgetOpacity)
                    setWidgetOpacity(UiFramework_1.UiFramework.getWidgetOpacity());
                if (UiFramework_1.UiFramework.visibility.autoHideUi !== autoHideUi)
                    setAutoHideUi(UiFramework_1.UiFramework.visibility.autoHideUi);
                if (UiFramework_1.UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
                    setUseProximityOpacity(UiFramework_1.UiFramework.visibility.useProximityOpacity);
                if (UiFramework_1.UiFramework.visibility.snapWidgetOpacity !== snapWidgetOpacity)
                    setSnapWidgetOpacity(UiFramework_1.UiFramework.visibility.snapWidgetOpacity);
                if (UiFramework_1.UiFramework.animateToolSettings !== animateToolSettings)
                    setAnimateToolSettings(UiFramework_1.UiFramework.animateToolSettings);
                if (UiFramework_1.UiFramework.useToolAsToolSettingsLabel !== useToolAsToolSettingsLabel)
                    setUseToolAsToolSettingsLabel(UiFramework_1.UiFramework.useToolAsToolSettingsLabel);
                if (UiFramework_1.UiFramework.getToolbarOpacity() !== toolbarOpacity)
                    setToolbarOpacity(UiFramework_1.UiFramework.getToolbarOpacity());
            }
        };
        return SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
    }, [
        autoCollapseUnpinnedPanels,
        autoHideUi,
        showWidgetIcon,
        snapWidgetOpacity,
        theme,
        useDragInteraction,
        useProximityOpacity,
        widgetOpacity,
        animateToolSettings,
        useToolAsToolSettingsLabel,
        toolbarOpacity,
    ]);
    const defaultThemeOption = {
        label: systemPreferredLabel.current,
        value: ThemeManager_1.SYSTEM_PREFERRED_COLOR_THEME,
    };
    const themeOptions = [
        defaultThemeOption,
        { label: lightLabel.current, value: ThemeManager_1.ColorTheme.Light },
        { label: darkLabel.current, value: ThemeManager_1.ColorTheme.Dark },
    ];
    const onThemeChange = React.useCallback((newValue) => {
        UiFramework_1.UiFramework.setColorTheme(newValue);
    }, []);
    const onAutoHideChange = React.useCallback(async () => {
        UiFramework_1.UiFramework.visibility.autoHideUi = !autoHideUi;
    }, [autoHideUi]);
    const onUseProximityOpacityChange = React.useCallback(async () => {
        UiFramework_1.UiFramework.visibility.useProximityOpacity = !useProximityOpacity;
    }, [useProximityOpacity]);
    const onSnapWidgetOpacityChange = React.useCallback(async () => {
        UiFramework_1.UiFramework.visibility.snapWidgetOpacity = !snapWidgetOpacity;
    }, [snapWidgetOpacity]);
    const onWidgetIconChange = React.useCallback(async () => {
        UiFramework_1.UiFramework.setShowWidgetIcon(!showWidgetIcon);
    }, [showWidgetIcon]);
    const onAutoCollapseUnpinnedPanelsChange = React.useCallback(async () => {
        UiFramework_1.UiFramework.setAutoCollapseUnpinnedPanels(!autoCollapseUnpinnedPanels);
    }, [autoCollapseUnpinnedPanels]);
    const onWidgetOpacityChange = React.useCallback(async (values) => {
        // istanbul ignore else
        if (values.length > 0) {
            UiFramework_1.UiFramework.setWidgetOpacity(values[0]);
        }
    }, []);
    const onToggleDragInteraction = React.useCallback(async () => {
        UiFramework_1.UiFramework.setUseDragInteraction(!useDragInteraction);
    }, [useDragInteraction]);
    const OnToggleAnimateToolSettings = React.useCallback(async () => {
        UiFramework_1.UiFramework.setAnimateToolSettings(!animateToolSettings);
    }, [animateToolSettings]);
    const currentTheme = UiFramework_1.UiFramework.getColorTheme();
    const OnToggleUseToolAsToolSettingsLabel = React.useCallback(async () => {
        UiFramework_1.UiFramework.setUseToolAsToolSettingsLabel(!useToolAsToolSettingsLabel);
    }, [useToolAsToolSettingsLabel]);
    const onToolbarOpacityChange = React.useCallback(async (values) => {
        // istanbul ignore else
        if (values.length > 0) {
            UiFramework_1.UiFramework.setToolbarOpacity(values[0]);
        }
    }, []);
    return (React.createElement("div", { className: "uifw-settings" },
        React.createElement(SettingsItem, { title: themeTitle.current, description: themeDescription.current, settingUi: React.createElement("div", { "data-testid": "select-theme-container", className: "select-theme-container" },
                React.createElement(itwinui_react_1.Select, { value: currentTheme, onChange: onThemeChange, options: themeOptions, "data-testid": "select-theme", size: "small" })) }),
        React.createElement(SettingsItem, { title: autoHideTitle.current, description: autoHideDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
        React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
        React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
        React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
        React.createElement(SettingsItem, { title: widgetIconTitle.current, description: widgetIconDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
        React.createElement(SettingsItem, { title: autoCollapseUnpinnedPanelsTitle.current, description: autoCollapseUnpinnedPanelsDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
        React.createElement(SettingsItem, { title: animateToolSettingsTitle.current, description: animateToolSettingsDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
        React.createElement(SettingsItem, { title: useToolAsToolSettingsLabelTitle.current, description: useToolAsToolSettingsLabelDescription.current, settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
        React.createElement(SettingsItem, { title: toolbarOpacityTitle.current, description: toolbarOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.Slider, { style: { flex: "1" }, values: [toolbarOpacity], step: 0.05, onChange: onToolbarOpacityChange, min: 0.2, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) }),
        React.createElement(SettingsItem, { title: widgetOpacityTitle.current, description: widgetOpacityDescription.current, settingUi: React.createElement(itwinui_react_1.Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.2, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })));
}
exports.UiSettingsPage = UiSettingsPage;
function SettingsItem(props) {
    const { title, description, settingUi } = props;
    return (React.createElement("div", { className: "uifw-settings-item" },
        React.createElement("div", { className: "panel left-panel" },
            React.createElement("span", { className: "title" }, title),
            React.createElement("span", { className: "description" }, description)),
        React.createElement("div", { className: "panel right-panel" }, settingUi)));
}
/**
 * Return a SettingsTabEntry that can be used to define the available settings that can be set for an application.
 * @param itemPriority - Used to define the order of the entry in the Settings Stage
 * @beta
 */
function getUiSettingsManagerEntry(itemPriority) {
    return {
        itemPriority,
        tabId: "uifw:UiStateStorage",
        label: UiFramework_1.UiFramework.translate("settings.uiSettingsPage.label"),
        icon: appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(window_settings_svg_1.default),
        page: React.createElement(UiSettingsPage, null),
        isDisabled: false,
        tooltip: UiFramework_1.UiFramework.translate("settings.uiSettingsPage.tooltip"),
    };
}
exports.getUiSettingsManagerEntry = getUiSettingsManagerEntry;
//# sourceMappingURL=UiSettingsPage.js.map