/*---------------------------------------------------------------------------------------------
 * 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
 */
import "./ConfigurableUiContent.scss";
import * as React from "react";
import { Point } from "@itwin/core-react";
import { ThemeProvider } from "@itwin/itwinui-react";
import { CursorInformation } from "../cursor/CursorInformation";
import { CursorPopupMenu } from "../cursor/cursormenu/CursorMenu";
import { CursorPopupRenderer } from "../cursor/cursorpopup/CursorPopupManager";
import { ModalDialogRenderer } from "../dialog/ModalDialogManager";
import { ModelessDialogRenderer } from "../dialog/ModelessDialogManager";
import { ElementTooltip } from "../feedback/ElementTooltip";
import { KeyboardShortcutMenu } from "../keyboardshortcut/KeyboardShortcutMenu";
import { InputFieldMessage } from "../messages/InputField";
import { PointerMessage } from "../messages/Pointer";
import { PopupRenderer } from "../popup/PopupManager";
import { WidgetPanelsFrontstage } from "../widget-panels/Frontstage";
import { ContentDialogRenderer } from "../dialog/ContentDialogManager";
import { UiFramework } from "../UiFramework";
import { InternalConfigurableUiManager } from "./InternalConfigurableUiManager";
import { MessageRenderer } from "../messages/MessageRenderer";
import { TOOLBAR_OPACITY_DEFAULT, WIDGET_OPACITY_DEFAULT, } from "../theme/ThemeId";
import { useReduxFrameworkState } from "../uistate/useReduxFrameworkState";
/** @internal */
export const ConfigurableUiContext = React.createContext({});
/**
 * Allows children to get the bounds or other properties of the wrapper element.
 * @internal
 */
export const WrapperContext = React.createContext(document.body);
/** The ConfigurableUiContent component is the component the pages specified using ConfigurableUi
 * @public
 */
export function ConfigurableUiContent(props) {
    useWidgetOpacity(props.widgetOpacity);
    useToolbarOpacity(props.toolbarOpacity);
    const [mainElement, setMainElement] = React.useState();
    const [portalContainer, setPortalContainer] = React.useState();
    React.useEffect(() => {
        UiFramework.keyboardShortcuts.setFocusToHome();
    }, []);
    React.useEffect(() => {
        InternalConfigurableUiManager.activityTracker.initialize({
            idleTimeout: props.idleTimeout,
            intervalTimeout: props.intervalTimeout,
        });
        return () => {
            InternalConfigurableUiManager.activityTracker.terminate();
        };
    }, [props.idleTimeout, props.intervalTimeout]);
    const handleMouseMove = React.useCallback((e) => {
        const point = new Point(e.pageX, e.pageY);
        CursorInformation.handleMouseMove(point);
    }, []);
    return (React.createElement(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(WrapperContext.Provider, { value: mainElement ?? document.body },
                React.createElement(ThemeProvider, { style: { height: "100%" }, portalContainer: portalContainer },
                    props.appBackstage,
                    React.createElement(WidgetPanelsFrontstage, null),
                    React.createElement(ElementTooltip, null),
                    React.createElement(PointerMessage, null),
                    React.createElement(KeyboardShortcutMenu, null),
                    React.createElement(InputFieldMessage, null),
                    React.createElement(CursorPopupMenu, null),
                    React.createElement(CursorPopupRenderer, null),
                    React.createElement(PopupRenderer, null),
                    React.createElement(MessageRenderer, null),
                    React.createElement("div", { className: "uifw-configurableui-portalContainer", ref: (instance) => setPortalContainer(instance ?? undefined) },
                        React.createElement(ContentDialogRenderer, null),
                        React.createElement(ModelessDialogRenderer, null),
                        React.createElement(ModalDialogRenderer, null)))))));
}
function useWidgetOpacity(widgetOpacity) {
    const reduxWidgetOpacity = useReduxFrameworkState((state) => {
        // eslint-disable-next-line deprecation/deprecation
        return state?.configurableUiState.widgetOpacity;
    });
    const opacity = widgetOpacity ?? reduxWidgetOpacity ?? 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 = useReduxFrameworkState((state) => {
        // eslint-disable-next-line deprecation/deprecation
        return state?.configurableUiState.toolbarOpacity;
    });
    const opacity = toolbarOpacity ?? reduxToolbarOpacity ?? 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