/*---------------------------------------------------------------------------------------------
* 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.90;
/** The default widget opacity.
 * @public
 */
export const TOOLBAR_OPACITY_DEFAULT = 0.50;
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.state = {
            ownerDocument: undefined,
        };
        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) => {
            setTimeout(() => document.documentElement.style.setProperty("--buic-widget-opacity", opacity.toString()));
        };
        this._setToolbarOpacity = (opacity) => {
            setTimeout(() => document.documentElement.style.setProperty("--buic-toolbar-opacity", opacity.toString()));
        };
        this._handleRefSet = (popupDiv) => {
            var _a;
            const ownerDocument = (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : undefined;
            if (ownerDocument) {
                this.setState({ ownerDocument });
            }
        };
    }
    componentDidMount() {
        this._setTheme(this.props.theme);
    }
    componentDidUpdate(prevProps) {
        if (this.props.theme !== prevProps.theme)
            this._setTheme(this.props.theme);
        const currentWidgetOpacity = document.documentElement.style.getPropertyValue("--buic-widget-opacity");
        if (this.props.widgetOpacity.toString() !== currentWidgetOpacity)
            this._setWidgetOpacity(this.props.widgetOpacity);
        const currentToolbarOpacity = document.documentElement.style.getPropertyValue("--buic-toolbar-opacity");
        if (this.props.toolbarOpacity.toString() !== currentToolbarOpacity)
            this._setToolbarOpacity(this.props.toolbarOpacity);
    }
    render() {
        const theme = (this.props.theme === SYSTEM_PREFERRED_COLOR_THEME) ? "os" : this.props.theme;
        return (React.createElement("div", { style: { height: "100%" }, ref: this._handleRefSet },
            React.createElement(ThemeProvider, { theme: theme, themeOptions: { ownerDocument: this.state.ownerDocument } }, this.props.children)));
    }
}
/**
 * ThemeManager handles setting color themes.
 * This React component is Redux connected.
 * @public
 */
export const ThemeManager = connect(mapStateToProps)(ThemeManagerComponent); // eslint-disable-line @typescript-eslint/naming-convention
//# sourceMappingURL=ThemeManager.js.map