/*---------------------------------------------------------------------------------------------
 * 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
 */
import { SvgWindowSettings } from "@itwin/itwinui-icons-react";
import "./UiSettingsPage.scss";
import * as React from "react";
import { UiFramework } from "../../UiFramework.js";
import { SyncUiEventDispatcher, SyncUiEventId, } from "../../syncui/SyncUiEventDispatcher.js";
import { Select, Slider, ToggleSwitch } from "@itwin/itwinui-react";
import { useTranslation } from "../../hooks/useTranslation.js";
import { ColorTheme, SYSTEM_PREFERRED_COLOR_THEME, } from "../../theme/ThemeId.js";
import { ConfigurableUiActionId } from "../../redux/ConfigurableUiState.js";
/* eslint-disable @typescript-eslint/no-deprecated */
/** 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.
 */
export function UiSettingsPage() {
    const { translate } = useTranslation();
    const [theme, setTheme] = React.useState(() => UiFramework.getColorTheme());
    const [useDragInteraction, setUseDragInteraction] = React.useState(() => UiFramework.useDragInteraction);
    const [showWidgetIcon, setShowWidgetIcon] = React.useState(() => UiFramework.showWidgetIcon);
    const [autoCollapseUnpinnedPanels, setAutoCollapseUnpinnedPanels] = React.useState(() => UiFramework.autoCollapseUnpinnedPanels);
    const [animateToolSettings, setAnimateToolSettings] = React.useState(() => UiFramework.animateToolSettings);
    const [useToolAsToolSettingsLabel, setUseToolAsToolSettingsLabel] = React.useState(() => UiFramework.useToolAsToolSettingsLabel);
    const [widgetOpacity, setWidgetOpacity] = React.useState(() => UiFramework.getWidgetOpacity());
    const [autoHideUi, setAutoHideUi] = React.useState(() => UiFramework.visibility.autoHideUi);
    const [useProximityOpacity, setUseProximityOpacity] = React.useState(
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    () => UiFramework.visibility.useProximityOpacity);
    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework.visibility.snapWidgetOpacity);
    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => UiFramework.getToolbarOpacity());
    React.useEffect(() => {
        const syncIdsOfInterest = [
            ConfigurableUiActionId.SetTheme,
            ConfigurableUiActionId.SetWidgetOpacity,
            ConfigurableUiActionId.SetShowWidgetIcon,
            ConfigurableUiActionId.SetDragInteraction,
            ConfigurableUiActionId.AutoCollapseUnpinnedPanels,
            ConfigurableUiActionId.AnimateToolSettings,
            ConfigurableUiActionId.UseToolAsToolSettingsLabel,
            ConfigurableUiActionId.SetToolbarOpacity,
            SyncUiEventId.ShowHideManagerSettingChange,
        ];
        return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {
            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
                if (UiFramework.getColorTheme() !== theme)
                    setTheme(UiFramework.getColorTheme());
                if (UiFramework.visibility.autoHideUi !== autoHideUi)
                    setAutoHideUi(UiFramework.visibility.autoHideUi);
                if (UiFramework.useDragInteraction !== useDragInteraction)
                    setUseDragInteraction(UiFramework.useDragInteraction);
                if (UiFramework.showWidgetIcon !== showWidgetIcon)
                    setShowWidgetIcon(UiFramework.showWidgetIcon);
                if (UiFramework.autoCollapseUnpinnedPanels !== autoCollapseUnpinnedPanels)
                    setAutoCollapseUnpinnedPanels(UiFramework.autoCollapseUnpinnedPanels);
                if (UiFramework.getWidgetOpacity() !== widgetOpacity)
                    setWidgetOpacity(UiFramework.getWidgetOpacity());
                if (UiFramework.visibility.autoHideUi !== autoHideUi)
                    setAutoHideUi(UiFramework.visibility.autoHideUi);
                // eslint-disable-next-line @typescript-eslint/no-deprecated
                if (UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
                    // eslint-disable-next-line @typescript-eslint/no-deprecated
                    setUseProximityOpacity(UiFramework.visibility.useProximityOpacity);
                if (UiFramework.visibility.snapWidgetOpacity !== snapWidgetOpacity)
                    setSnapWidgetOpacity(UiFramework.visibility.snapWidgetOpacity);
                if (UiFramework.animateToolSettings !== animateToolSettings)
                    setAnimateToolSettings(UiFramework.animateToolSettings);
                if (UiFramework.useToolAsToolSettingsLabel !== useToolAsToolSettingsLabel)
                    setUseToolAsToolSettingsLabel(UiFramework.useToolAsToolSettingsLabel);
                if (UiFramework.getToolbarOpacity() !== toolbarOpacity)
                    setToolbarOpacity(UiFramework.getToolbarOpacity());
            }
        });
    }, [
        autoCollapseUnpinnedPanels,
        autoHideUi,
        showWidgetIcon,
        snapWidgetOpacity,
        theme,
        useDragInteraction,
        useProximityOpacity,
        widgetOpacity,
        animateToolSettings,
        useToolAsToolSettingsLabel,
        toolbarOpacity,
    ]);
    const defaultThemeOption = {
        label: translate("settings.uiSettingsPage.systemPreferred"),
        value: SYSTEM_PREFERRED_COLOR_THEME,
    };
    const themeOptions = [
        defaultThemeOption,
        {
            label: translate("settings.uiSettingsPage.light"),
            value: ColorTheme.Light,
        },
        {
            label: translate("settings.uiSettingsPage.dark"),
            value: ColorTheme.Dark,
        },
        {
            label: translate("settings.uiSettingsPage.lightHighContrast"),
            value: ColorTheme.HighContrastLight,
        },
        {
            label: translate("settings.uiSettingsPage.darkHighContrast"),
            value: ColorTheme.HighContrastDark,
        },
        {
            label: translate("settings.uiSettingsPage.inherit"),
            value: ColorTheme.Inherit,
        },
    ];
    const onThemeChange = React.useCallback((newValue) => {
        UiFramework.setColorTheme(newValue);
    }, []);
    const onAutoHideChange = React.useCallback(async () => {
        UiFramework.visibility.autoHideUi = !autoHideUi;
    }, [autoHideUi]);
    const onUseProximityOpacityChange = React.useCallback(async () => {
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        UiFramework.visibility.useProximityOpacity = !useProximityOpacity;
    }, [useProximityOpacity]);
    const onSnapWidgetOpacityChange = React.useCallback(async () => {
        UiFramework.visibility.snapWidgetOpacity = !snapWidgetOpacity;
    }, [snapWidgetOpacity]);
    const onWidgetIconChange = React.useCallback(async () => {
        UiFramework.setShowWidgetIcon(!showWidgetIcon);
    }, [showWidgetIcon]);
    const onAutoCollapseUnpinnedPanelsChange = React.useCallback(async () => {
        UiFramework.setAutoCollapseUnpinnedPanels(!autoCollapseUnpinnedPanels);
    }, [autoCollapseUnpinnedPanels]);
    const onWidgetOpacityChange = React.useCallback(async (values) => {
        if (values.length > 0) {
            UiFramework.setWidgetOpacity(values[0]);
        }
    }, []);
    const onToggleDragInteraction = React.useCallback(async () => {
        UiFramework.setUseDragInteraction(!useDragInteraction);
    }, [useDragInteraction]);
    const OnToggleAnimateToolSettings = React.useCallback(async () => {
        UiFramework.setAnimateToolSettings(!animateToolSettings);
    }, [animateToolSettings]);
    const currentTheme = UiFramework.getColorTheme();
    const OnToggleUseToolAsToolSettingsLabel = React.useCallback(async () => {
        UiFramework.setUseToolAsToolSettingsLabel(!useToolAsToolSettingsLabel);
    }, [useToolAsToolSettingsLabel]);
    const onToolbarOpacityChange = React.useCallback(async (values) => {
        if (values.length > 0) {
            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(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(ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.dragInteractionTitle"), description: translate("settings.uiSettingsPage.dragInteractionDescription"), settingUi: React.createElement(ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.useProximityOpacityTitle"), description: translate("settings.uiSettingsPage.useProximityOpacityDescription"), settingUi: React.createElement(ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.snapWidgetOpacityTitle"), description: translate("settings.uiSettingsPage.snapWidgetOpacityDescription"), settingUi: React.createElement(ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.widgetIconTitle"), description: translate("settings.uiSettingsPage.widgetIconDescription"), settingUi: React.createElement(ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"), description: translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"), settingUi: React.createElement(ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.animateToolSettingsTitle"), description: translate("settings.uiSettingsPage.animateToolSettingsDescription"), settingUi: React.createElement(ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"), description: translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"), settingUi: React.createElement(ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
        React.createElement(SettingsItem, { title: translate("settings.uiSettingsPage.toolbarOpacityTitle"), description: translate("settings.uiSettingsPage.toolbarOpacityDescription"), settingUi: React.createElement(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(Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.2, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })));
}
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
 */
export function getUiSettingsManagerEntry(itemPriority) {
    return {
        itemPriority,
        tabId: "uifw:UiStateStorage",
        label: UiFramework.translate("settings.uiSettingsPage.label"),
        icon: React.createElement(SvgWindowSettings, null),
        page: React.createElement(UiSettingsPage, null),
        isDisabled: false,
        tooltip: UiFramework.translate("settings.uiSettingsPage.tooltip"),
    };
}
//# sourceMappingURL=UiSettingsPage.js.map