"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;
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 SyncUiEventDispatcher_1 = require("../../syncui/SyncUiEventDispatcher");
const itwinui_react_1 = require("@itwin/itwinui-react");
const useTranslation_1 = require("../../hooks/useTranslation");
const ThemeId_1 = require("../../theme/ThemeId");
const ConfigurableUiState_1 = require("../../redux/ConfigurableUiState");
/* eslint-disable deprecation/deprecation */
/** UiSettingsPage displaying the active UI settings. This page lets users set the following settings.
 *
 * - theme - Dark, Light, with or without High contrast, 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 become when the mouse in not in them.
 * @beta
 * @deprecated in 4.15.0. Use iTwinUI components to build a settings page.
 */
function UiSettingsPage() {
    const { translate } = (0, useTranslation_1.useTranslation)();
    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(
    // eslint-disable-next-line deprecation/deprecation
    () => 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 = [
            ConfigurableUiState_1.ConfigurableUiActionId.SetTheme,
            ConfigurableUiState_1.ConfigurableUiActionId.SetWidgetOpacity,
            ConfigurableUiState_1.ConfigurableUiActionId.SetShowWidgetIcon,
            ConfigurableUiState_1.ConfigurableUiActionId.SetDragInteraction,
            ConfigurableUiState_1.ConfigurableUiActionId.AutoCollapseUnpinnedPanels,
            ConfigurableUiState_1.ConfigurableUiActionId.AnimateToolSettings,
            ConfigurableUiState_1.ConfigurableUiActionId.UseToolAsToolSettingsLabel,
            ConfigurableUiState_1.ConfigurableUiActionId.SetToolbarOpacity,
            SyncUiEventDispatcher_1.SyncUiEventId.ShowHideManagerSettingChange,
        ];
        return SyncUiEventDispatcher_1.SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {
            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);
                // eslint-disable-next-line deprecation/deprecation
                if (UiFramework_1.UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
                    // eslint-disable-next-line deprecation/deprecation
                    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());
            }
        });
    }, [
        autoCollapseUnpinnedPanels,
        autoHideUi,
        showWidgetIcon,
        snapWidgetOpacity,
        theme,
        useDragInteraction,
        useProximityOpacity,
        widgetOpacity,
        animateToolSettings,
        useToolAsToolSettingsLabel,
        toolbarOpacity,
    ]);
    const defaultThemeOption = {
        label: translate("settings.uiSettingsPage.systemPreferred"),
        value: ThemeId_1.SYSTEM_PREFERRED_COLOR_THEME,
    };
    const themeOptions = [
        defaultThemeOption,
        {
            label: translate("settings.uiSettingsPage.light"),
            value: ThemeId_1.ColorTheme.Light,
        },
        {
            label: translate("settings.uiSettingsPage.dark"),
            value: ThemeId_1.ColorTheme.Dark,
        },
        {
            label: translate("settings.uiSettingsPage.lightHighContrast"),
            value: ThemeId_1.ColorTheme.HighContrastLight,
        },
        {
            label: translate("settings.uiSettingsPage.darkHighContrast"),
            value: ThemeId_1.ColorTheme.HighContrastDark,
        },
        {
            label: translate("settings.uiSettingsPage.inherit"),
            value: ThemeId_1.ColorTheme.Inherit,
        },
    ];
    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 () => {
        // eslint-disable-next-line deprecation/deprecation
        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) => {
        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) => {
        if (values.length > 0) {
            UiFramework_1.UiFramework.setToolbarOpacity(values[0]);
        }
    }, []);
    return (React.createElement("div", { className: "uifw-settings" },
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.themeTitle"), description: translate("settings.uiSettingsPage.themeDescription"), 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: translate("settings.uiSettingsPage.autoHideTitle"), description: translate("settings.uiSettingsPage.autoHideDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.dragInteractionTitle"), description: translate("settings.uiSettingsPage.dragInteractionDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.useProximityOpacityTitle"), description: translate("settings.uiSettingsPage.useProximityOpacityDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.snapWidgetOpacityTitle"), description: translate("settings.uiSettingsPage.snapWidgetOpacityDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.widgetIconTitle"), description: translate("settings.uiSettingsPage.widgetIconDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"), description: translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.animateToolSettingsTitle"), description: translate("settings.uiSettingsPage.animateToolSettingsDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"), description: translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"), settingUi: React.createElement(itwinui_react_1.ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.toolbarOpacityTitle"), description: translate("settings.uiSettingsPage.toolbarOpacityDescription"), 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: translate("settings.uiSettingsPage.widgetOpacityTitle"), description: translate("settings.uiSettingsPage.widgetOpacityDescription"), 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: 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