/*---------------------------------------------------------------------------------------------
* 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
 */
// cSpell:ignore configurableui checkmark
import widowSettingsIconSvg from "@bentley/icons-generic/icons/window-settings.svg";
import "./UiSettingsPage.scss";
import * as React from "react";
import { UiFramework } from "../../UiFramework";
import { ColorTheme, SYSTEM_PREFERRED_COLOR_THEME } from "../../theme/ThemeManager";
import { SyncUiEventDispatcher, SyncUiEventId } from "../../syncui/SyncUiEventDispatcher";
import { IconSpecUtilities } from "@itwin/appui-abstract";
import { Select, Slider, ToggleSwitch } from "@itwin/itwinui-react";
/**
 * @deprecated in 3.6. Framework version is deprecated, only UI2.0 is supported.
 * @beta
 */
export function UiSettingsPage(props) {
    const { allowSettingUiFrameworkVersion } = props || {};
    const themeTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.themeTitle"));
    const themeDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.themeDescription"));
    const autoHideTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoHideTitle"));
    const autoHideDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoHideDescription"));
    const dragInteractionTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.dragInteractionTitle"));
    const dragInteractionDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.dragInteractionDescription"));
    const useNewUiTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.newUiTitle"));
    const useNewUiDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.newUiDescription"));
    const useProximityOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.useProximityOpacityTitle"));
    const useProximityOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.useProximityOpacityDescription"));
    const snapWidgetOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityTitle"));
    const snapWidgetOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.snapWidgetOpacityDescription"));
    const darkLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.dark"));
    const lightLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.light"));
    const systemPreferredLabel = React.useRef(UiFramework.translate("settings.uiSettingsPage.systemPreferred"));
    const widgetOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetOpacityTitle"));
    const widgetOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetOpacityDescription"));
    const widgetIconTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetIconTitle"));
    const widgetIconDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.widgetIconDescription"));
    const autoCollapseUnpinnedPanelsTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsTitle"));
    const autoCollapseUnpinnedPanelsDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.autoCollapseUnpinnedPanelsDescription"));
    const animateToolSettingsTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.animateToolSettingsTitle"));
    const animateToolSettingsDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.animateToolSettingsDescription"));
    const useToolAsToolSettingsLabelTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelTitle"));
    const useToolAsToolSettingsLabelDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.useToolAsToolSettingsLabelDescription"));
    const toolbarOpacityTitle = React.useRef(UiFramework.translate("settings.uiSettingsPage.toolbarOpacityTitle"));
    const toolbarOpacityDescription = React.useRef(UiFramework.translate("settings.uiSettingsPage.toolbarOpacityDescription"));
    const [theme, setTheme] = React.useState(() => UiFramework.getColorTheme());
    const [uiVersion, setUiVersion] = React.useState(() => UiFramework.uiVersion); // eslint-disable-line deprecation/deprecation
    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(() => UiFramework.visibility.useProximityOpacity);
    const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState(() => UiFramework.visibility.snapWidgetOpacity);
    const [toolbarOpacity, setToolbarOpacity] = React.useState(() => 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", SyncUiEventId.ShowHideManagerSettingChange];
        const handleSyncUiEvent = (args) => {
            // istanbul ignore else
            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.uiVersion !== uiVersion) // eslint-disable-line deprecation/deprecation
                    setUiVersion(UiFramework.uiVersion); // eslint-disable-line deprecation/deprecation
                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);
                if (UiFramework.visibility.useProximityOpacity !== useProximityOpacity)
                    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());
            }
        };
        return SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
    }, [autoCollapseUnpinnedPanels, autoHideUi, showWidgetIcon, snapWidgetOpacity, theme, uiVersion,
        useDragInteraction, useProximityOpacity, widgetOpacity, animateToolSettings, useToolAsToolSettingsLabel, toolbarOpacity]);
    const defaultThemeOption = { label: systemPreferredLabel.current, value: SYSTEM_PREFERRED_COLOR_THEME };
    const themeOptions = [
        defaultThemeOption,
        { label: lightLabel.current, value: ColorTheme.Light },
        { label: darkLabel.current, value: ColorTheme.Dark },
    ];
    const onThemeChange = React.useCallback((newValue) => {
        UiFramework.setColorTheme(newValue);
    }, []);
    const onAutoHideChange = React.useCallback(async () => {
        UiFramework.visibility.autoHideUi = !autoHideUi;
    }, [autoHideUi]);
    const onUseProximityOpacityChange = React.useCallback(async () => {
        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) => {
        // istanbul ignore else
        if (values.length > 0) {
            UiFramework.setWidgetOpacity(values[0]);
        }
    }, []);
    const onToggleFrameworkVersion = React.useCallback(async () => {
        UiFramework.setUiVersion(uiVersion === "2" ? "1" : "2"); // eslint-disable-line deprecation/deprecation
    }, [uiVersion]);
    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) => {
        // istanbul ignore else
        if (values.length > 0) {
            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(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(ToggleSwitch, { checked: autoHideUi, onChange: onAutoHideChange }) }),
        allowSettingUiFrameworkVersion && React.createElement(SettingsItem, { title: useNewUiTitle.current, description: useNewUiDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: UiFramework.uiVersion === "2", onChange: onToggleFrameworkVersion }) }),
        UiFramework.uiVersion === "2" && React.createElement(React.Fragment, null,
            React.createElement(SettingsItem, { title: dragInteractionTitle.current, description: dragInteractionDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useDragInteraction, onChange: onToggleDragInteraction }) }),
            React.createElement(SettingsItem, { title: useProximityOpacityTitle.current, description: useProximityOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useProximityOpacity, onChange: onUseProximityOpacityChange }) }),
            React.createElement(SettingsItem, { title: snapWidgetOpacityTitle.current, description: snapWidgetOpacityDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: snapWidgetOpacity, onChange: onSnapWidgetOpacityChange }) }),
            React.createElement(SettingsItem, { title: widgetIconTitle.current, description: widgetIconDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: showWidgetIcon, onChange: onWidgetIconChange }) }),
            React.createElement(SettingsItem, { title: autoCollapseUnpinnedPanelsTitle.current, description: autoCollapseUnpinnedPanelsDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: autoCollapseUnpinnedPanels, onChange: onAutoCollapseUnpinnedPanelsChange }) }),
            React.createElement(SettingsItem, { title: animateToolSettingsTitle.current, description: animateToolSettingsDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: animateToolSettings, onChange: OnToggleAnimateToolSettings }) }),
            React.createElement(SettingsItem, { title: useToolAsToolSettingsLabelTitle.current, description: useToolAsToolSettingsLabelDescription.current, settingUi: React.createElement(ToggleSwitch, { checked: useToolAsToolSettingsLabel, onChange: OnToggleUseToolAsToolSettingsLabel }) }),
            React.createElement(SettingsItem, { title: toolbarOpacityTitle.current, description: toolbarOpacityDescription.current, settingUi: React.createElement(Slider, { style: { flex: "1" }, values: [toolbarOpacity], step: 0.05, onChange: onToolbarOpacityChange, min: 0.20, max: 1.0, maxLabel: "1.0", tickLabels: ["", "", "", "", ""] }) })),
        React.createElement(SettingsItem, { title: widgetOpacityTitle.current, description: widgetOpacityDescription.current, settingUi: React.createElement(Slider, { style: { flex: "1" }, values: [widgetOpacity], step: 0.05, onChange: onWidgetOpacityChange, min: 0.20, 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)));
}
/**
 * @deprecated in 3.6. Framework version is deprecated, only UI2.0 is supported.
 * @beta
 */
export function getUiSettingsManagerEntry(itemPriority, allowSettingUiFrameworkVersion) {
    return {
        itemPriority, tabId: "uifw:UiStateStorage",
        label: UiFramework.translate("settings.uiSettingsPage.label"),
        icon: IconSpecUtilities.createWebComponentIconSpec(widowSettingsIconSvg),
        page: React.createElement(UiSettingsPage, { allowSettingUiFrameworkVersion: !!allowSettingUiFrameworkVersion }),
        isDisabled: false,
        tooltip: UiFramework.translate("settings.uiSettingsPage.tooltip"),
    };
}
//# sourceMappingURL=UiSettingsPage.js.map