"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 State
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeManager = void 0;
require("./ThemeManager.scss");
const React = require("react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const itwinui_react_v2_1 = require("@itwin/itwinui-react-v2");
const ThemeId_1 = require("./ThemeId");
const useReduxFrameworkState_1 = require("../uistate/useReduxFrameworkState");
/** Map of ColorTheme to ThemeType. */
const colorThemeToThemeTypeMap = {
    [ThemeId_1.ColorTheme.Light]: "light",
    [ThemeId_1.ColorTheme.HighContrastLight]: "light",
    [ThemeId_1.ColorTheme.Dark]: "dark",
    [ThemeId_1.ColorTheme.HighContrastDark]: "dark",
    [ThemeId_1.ColorTheme.System]: "os",
    os: "os", // handle "os" for backwards compatibility
};
/** List of high contrast color themes. */
const highContrastColorThemes = [
    ThemeId_1.ColorTheme.HighContrastDark,
    ThemeId_1.ColorTheme.HighContrastLight,
];
/** ThemeManager handles setting color themes and element opacity management. Note that this component will
 * affect the entire application by setting the data-theme attribute to the html element.
 * It also sets an iTwinUI `ThemeProvider` element locally, so all elements
 * within the AppUI tree will have the same theme, and should be using iTwinUI 2.x or later.
 * A `ColorTheme` enum values will configure iTwinUI `ThemeProvider` accordingly.
 * Any other string will only apply the `data-theme` attribute to the `html` element
 * and `ThemeProvider` theme will be set to `inherit`, in this case the application is
 * responsible for setting the theme by overriding iTwinUI css variables.
 *
 * This React component should wrap {@link ConfigurableUiContent}.
 *
 * ```tsx
 * <ThemeManager>
 *   <ConfigurableUiContent />
 * </ThemeManager>
 * ```
 * @public
 */
function ThemeManager({ children, ...props }) {
    const reduxTheme = (0, useReduxFrameworkState_1.useReduxFrameworkState)((state) => {
        // eslint-disable-next-line deprecation/deprecation
        return state?.configurableUiState.theme;
    });
    const theme = props.theme ?? reduxTheme ?? ThemeId_1.SYSTEM_PREFERRED_COLOR_THEME;
    React.useEffect(() => {
        document.documentElement.setAttribute("data-theme", theme);
    }, [theme]);
    const providerTheme = colorThemeToThemeTypeMap[theme];
    const highContrast = highContrastColorThemes.includes(theme);
    return (React.createElement(itwinui_react_1.ThemeProvider, { className: "uifw-root", theme: providerTheme ?? "inherit", themeOptions: { highContrast }, "data-root-container": "appui-root-id", includeCss: true },
        React.createElement(itwinui_react_v2_1.ThemeProvider /* v2 ThemeProvider is required to fix popup styling issues in widget popouts. */, { style: { height: "100%" }, theme: providerTheme ?? "inherit", themeOptions: { highContrast } }, children)));
}
exports.ThemeManager = ThemeManager;
//# sourceMappingURL=ThemeManager.js.map