/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module Dialog
 */
import "./ContentDialog.scss";
import * as React from "react";
import { Dialog } from "@itwin/core-react";
import { SyncUiEventDispatcher, SyncUiEventId, } from "../syncui/SyncUiEventDispatcher";
import { UiFramework } from "../UiFramework";
import classnames from "classnames";
// istanbul ignore next
/**
 *@internal
 */
export function useActiveContentControlId() {
    var _a;
    const [activeContentId, setActiveContentId] = React.useState((_a = UiFramework.content.getActiveContentControl()) === null || _a === void 0 ? void 0 : _a.uniqueId);
    React.useEffect(() => {
        const onActiveContentChanged = (_args) => {
            var _a;
            setActiveContentId((_a = UiFramework.content.getActiveContentControl()) === null || _a === void 0 ? void 0 : _a.uniqueId);
        };
        // IModelApp.viewManager.onSelectedViewportChanged will often fire before UI components have mounted
        // so use UiFramework.content.onActiveContentChangedEvent which will always trigger once all stage components
        // are loaded and when the IModelApp.viewManager.selectedView changes.
        UiFramework.content.onActiveContentChangedEvent.addListener(onActiveContentChanged);
        return () => {
            UiFramework.content.onActiveContentChangedEvent.removeListener(onActiveContentChanged);
        };
    }, []);
    React.useEffect(() => {
        const syncIdsOfInterest = [
            SyncUiEventId.ActiveContentChanged,
            SyncUiEventId.ContentControlActivated,
            SyncUiEventId.FrontstageReady,
        ];
        const handleSyncUiEvent = (args) => {
            var _a;
            // istanbul ignore else
            if (syncIdsOfInterest.some((value) => args.eventIds.has(value))) {
                setActiveContentId((_a = UiFramework.content.getActiveContentControl()) === null || _a === void 0 ? void 0 : _a.uniqueId);
            }
        };
        return SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);
    }, []);
    return activeContentId;
}
/** Content Dialog React component uses the Dialog component with a modal={false} prop.
 * It controls the z-index to keep the focused dialog above content but below widgets.
 * @public
 */
export function ContentDialog(props) {
    const { className, children, dialogId, style, modal, modelessId, onModelessPointerDown, ...otherProps } = props;
    const activeContentControlId = useActiveContentControlId();
    // istanbul ignore next
    const dialogClassName = React.useMemo(() => classnames(activeContentControlId === dialogId
        ? "active-content-dialog"
        : "inactive-content-dialog", className), [activeContentControlId, className, dialogId]);
    const [zIndex, setZIndex] = React.useState(UiFramework.content.dialogs.getZIndex(dialogId));
    const updateZIndex = React.useCallback(() => {
        const newZ = UiFramework.content.dialogs.getZIndex(dialogId);
        // istanbul ignore else
        if (newZ !== zIndex) {
            setZIndex(newZ);
        }
    }, [dialogId, zIndex]);
    return (React.createElement(Dialog, { className: dialogClassName, "data-item-type": "content-dialog", "data-item-id": dialogId, resizable: true, movable: true, trapFocus: false, modal: false, ...otherProps, modelessId: dialogId, onModelessPointerDown: (event) => UiFramework.content.dialogs.handlePointerDownEvent(event, dialogId, updateZIndex), style: { zIndex, ...style } }, children));
}
//# sourceMappingURL=ContentDialog.js.map