"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 ConfigurableUi
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfigurableUiContent = exports.WrapperContext = exports.ConfigurableUiContext = void 0;
require("./ConfigurableUiContent.scss");
const React = require("react");
const core_react_1 = require("@itwin/core-react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const CursorInformation_1 = require("../cursor/CursorInformation");
const CursorMenu_1 = require("../cursor/cursormenu/CursorMenu");
const CursorPopupManager_1 = require("../cursor/cursorpopup/CursorPopupManager");
const ModalDialogManager_1 = require("../dialog/ModalDialogManager");
const ModelessDialogManager_1 = require("../dialog/ModelessDialogManager");
const ElementTooltip_1 = require("../feedback/ElementTooltip");
const KeyboardShortcutMenu_1 = require("../keyboardshortcut/KeyboardShortcutMenu");
const InputField_1 = require("../messages/InputField");
const Pointer_1 = require("../messages/Pointer");
const PopupManager_1 = require("../popup/PopupManager");
const Frontstage_1 = require("../widget-panels/Frontstage");
const ContentDialogManager_1 = require("../dialog/ContentDialogManager");
const UiFramework_1 = require("../UiFramework");
const InternalConfigurableUiManager_1 = require("./InternalConfigurableUiManager");
const MessageRenderer_1 = require("../messages/MessageRenderer");
const ThemeId_1 = require("../theme/ThemeId");
const useReduxFrameworkState_1 = require("../uistate/useReduxFrameworkState");
/** @internal */
exports.ConfigurableUiContext = React.createContext({});
/**
 * Allows children to get the bounds or other properties of the wrapper element.
 * @internal
 */
exports.WrapperContext = React.createContext(document.body);
/** The ConfigurableUiContent component is the component the pages specified using ConfigurableUi
 * @public
 */
function ConfigurableUiContent(props) {
    useWidgetOpacity(props.widgetOpacity);
    useToolbarOpacity(props.toolbarOpacity);
    const [mainElement, setMainElement] = React.useState();
    const [portalContainer, setPortalContainer] = React.useState();
    React.useEffect(() => {
        UiFramework_1.UiFramework.keyboardShortcuts.setFocusToHome();
    }, []);
    React.useEffect(() => {
        InternalConfigurableUiManager_1.InternalConfigurableUiManager.activityTracker.initialize({
            idleTimeout: props.idleTimeout,
            intervalTimeout: props.intervalTimeout,
        });
        return () => {
            InternalConfigurableUiManager_1.InternalConfigurableUiManager.activityTracker.terminate();
        };
    }, [props.idleTimeout, props.intervalTimeout]);
    const handleMouseMove = React.useCallback((e) => {
        const point = new core_react_1.Point(e.pageX, e.pageY);
        CursorInformation_1.CursorInformation.handleMouseMove(point);
    }, []);
    return (React.createElement(exports.ConfigurableUiContext.Provider, { value: {
            viewOverlay: props.viewOverlay,
            widgetOpacity: props.widgetOpacity,
            widgetIcon: props.widgetIcon,
            collapsePanels: props.collapsePanels,
            animateToolSettings: props.animateToolSettings,
            toolAsToolSettingsLabel: props.toolAsToolSettingsLabel,
        } },
        React.createElement("main", { role: "main", id: "uifw-configurableui-wrapper", className: props.className, style: props.style, onMouseMove: handleMouseMove, ref: (el) => setMainElement(el ?? undefined) },
            React.createElement(exports.WrapperContext.Provider, { value: mainElement ?? document.body },
                React.createElement(itwinui_react_1.ThemeProvider, { style: { height: "100%" }, portalContainer: portalContainer },
                    props.appBackstage,
                    React.createElement(Frontstage_1.WidgetPanelsFrontstage, null),
                    React.createElement(ElementTooltip_1.ElementTooltip, null),
                    React.createElement(Pointer_1.PointerMessage, null),
                    React.createElement(KeyboardShortcutMenu_1.KeyboardShortcutMenu, null),
                    React.createElement(InputField_1.InputFieldMessage, null),
                    React.createElement(CursorMenu_1.CursorPopupMenu, null),
                    React.createElement(CursorPopupManager_1.CursorPopupRenderer, null),
                    React.createElement(PopupManager_1.PopupRenderer, null),
                    React.createElement(MessageRenderer_1.MessageRenderer, null),
                    React.createElement("div", { className: "uifw-configurableui-portalContainer", ref: (instance) => setPortalContainer(instance ?? undefined) },
                        React.createElement(ContentDialogManager_1.ContentDialogRenderer, null),
                        React.createElement(ModelessDialogManager_1.ModelessDialogRenderer, null),
                        React.createElement(ModalDialogManager_1.ModalDialogRenderer, null)))))));
}
exports.ConfigurableUiContent = ConfigurableUiContent;
function useWidgetOpacity(widgetOpacity) {
    const reduxWidgetOpacity = (0, useReduxFrameworkState_1.useReduxFrameworkState)((state) => {
        // eslint-disable-next-line deprecation/deprecation
        return state?.configurableUiState.widgetOpacity;
    });
    const opacity = widgetOpacity ?? reduxWidgetOpacity ?? ThemeId_1.WIDGET_OPACITY_DEFAULT;
    React.useEffect(() => {
        const currentWidgetOpacity = document.documentElement.style.getPropertyValue("--buic-widget-opacity");
        if (currentWidgetOpacity === opacity.toString())
            return;
        document.documentElement.style.setProperty("--buic-widget-opacity", opacity.toString());
        return () => {
            document.documentElement.style.removeProperty("--buic-widget-opacity");
        };
    }, [opacity]);
}
function useToolbarOpacity(toolbarOpacity) {
    const reduxToolbarOpacity = (0, useReduxFrameworkState_1.useReduxFrameworkState)((state) => {
        // eslint-disable-next-line deprecation/deprecation
        return state?.configurableUiState.toolbarOpacity;
    });
    const opacity = toolbarOpacity ?? reduxToolbarOpacity ?? ThemeId_1.TOOLBAR_OPACITY_DEFAULT;
    React.useEffect(() => {
        const currentToolbarOpacity = document.documentElement.style.getPropertyValue("--buic-toolbar-opacity");
        if (currentToolbarOpacity === opacity.toString())
            return;
        document.documentElement.style.setProperty("--buic-toolbar-opacity", opacity.toString());
        return () => {
            document.documentElement.style.removeProperty("--buic-toolbar-opacity");
        };
    }, [opacity]);
}
//# sourceMappingURL=ConfigurableUiContent.js.map