/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module State
 */
import * as React from "react";
import { connect } from "react-redux";
import { ThemeProvider } from "@itwin/itwinui-react";
import { UiFramework } from "../UiFramework";
/** Enum for the Color Theme string.
 * @public
 */
export var ColorTheme;
(function (ColorTheme) {
    ColorTheme["Light"] = "light";
    ColorTheme["Dark"] = "dark";
})(ColorTheme || (ColorTheme = {}));
/** System preferred color theme.
 * @public
 */
export const SYSTEM_PREFERRED_COLOR_THEME = "SYSTEM_PREFERRED";
/** The default widget opacity.
 * @public
 */
export const WIDGET_OPACITY_DEFAULT = 0.9;
/** The default widget opacity.
 * @public
 */
export const TOOLBAR_OPACITY_DEFAULT = 0.5;
function mapStateToProps(state) {
    const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
    // istanbul ignore if
    if (!frameworkState)
        return undefined;
    return {
        theme: frameworkState.configurableUiState.theme,
        widgetOpacity: frameworkState.configurableUiState.widgetOpacity,
        toolbarOpacity: frameworkState.configurableUiState.toolbarOpacity,
    };
}
/** ThemeManagerComponent handles setting themes.
 */
class ThemeManagerComponent extends React.Component {
    constructor() {
        super(...arguments);
        this._setTheme = (theme) => {
            document.documentElement.classList.add("theme-transition");
            document.documentElement.setAttribute("data-theme", theme);
            window.setTimeout(() => document.documentElement.classList.remove("theme-transition"), 1000);
        };
        this._setWidgetOpacity = (opacity) => {
            const currentWidgetOpacity = document.documentElement.style.getPropertyValue("--buic-widget-opacity");
            if (currentWidgetOpacity !== opacity.toString()) {
                setTimeout(() => document.documentElement.style.setProperty("--buic-widget-opacity", opacity.toString()));
            }
        };
        this._setToolbarOpacity = (opacity) => {
            const currentToolbarOpacity = document.documentElement.style.getPropertyValue("--buic-toolbar-opacity");
            if (currentToolbarOpacity !== opacity.toString()) {
                setTimeout(() => {
                    document.documentElement.style.setProperty("--buic-toolbar-opacity", opacity.toString());
                });
            }
        };
    }
    componentDidMount() {
        this._setTheme(this.props.theme);
        this._setWidgetOpacity(this.props.widgetOpacity);
        this._setToolbarOpacity(this.props.toolbarOpacity);
    }
    componentDidUpdate(prevProps) {
        if (this.props.theme !== prevProps.theme)
            this._setTheme(this.props.theme);
        if (this.props.widgetOpacity !== prevProps.widgetOpacity)
            this._setWidgetOpacity(this.props.widgetOpacity);
        if (this.props.toolbarOpacity !== prevProps.toolbarOpacity)
            this._setToolbarOpacity(this.props.toolbarOpacity);
    }
    render() {
        const theme = this.props.theme === SYSTEM_PREFERRED_COLOR_THEME
            ? "os"
            : this.props.theme;
        return (React.createElement(ThemeProvider, { style: { height: "100%" }, theme: theme, "data-root-container": "iui-root-id" }, this.props.children));
    }
}
/**
 * ThemeManager handles setting color themes.
 * This React component is Redux connected.
 * @public
 */
export const ThemeManager = connect(mapStateToProps)(ThemeManagerComponent);
//# sourceMappingURL=ThemeManager.js.map