/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module Popup
 */
import * as React from "react";
import { Key } from "ts-key-enum";
import { DivWithOutsideClick } from "@itwin/core-react";
import { FocusTrap, Point } from "@itwin/core-react/internal";
import { PositionPopup } from "./PositionPopup.js";
import { KeyinPalettePanel } from "./KeyinPalettePanel.js";
/** Keyin Palette Popup Component
 * @public
 */
export function KeyinPalettePopup({ 
// eslint-disable-next-line @typescript-eslint/no-deprecated
el, id, keyins, onCancel, onItemExecuted, anchorEl, }) {
    // due to deprecation policy, the context won't be used as fallback
    // until we replace `el` with the optional `anchorEl` property.
    // const wrapper = React.useContext(WrapperContext);
    const _el = anchorEl ?? el;
    const [popupSize, setPopupSize] = React.useState({ width: -1, height: -1 });
    const onSizeKnown = React.useCallback((newSize) => {
        if (newSize.height === popupSize.height &&
            newSize.width === popupSize.width)
            return;
        setPopupSize(newSize);
    }, [popupSize]);
    const cancel = React.useCallback(() => {
        onCancel && onCancel();
    }, [onCancel]);
    const handleKeyDown = React.useCallback((event) => {
        switch (event.key) {
            case Key.Escape.valueOf():
                cancel();
                event.preventDefault();
                break;
        }
    }, [cancel]);
    const xMid = _el.getBoundingClientRect().left + _el.getBoundingClientRect().width / 2;
    let point = new Point(xMid, _el.getBoundingClientRect().top);
    if (popupSize.width > 0)
        point = point.offsetX(popupSize.width / -2);
    return (React.createElement(PositionPopup, { key: id, className: "uifw-command-palette-popup-container", point: point, onSizeKnown: onSizeKnown },
        React.createElement(DivWithOutsideClick, { onOutsideClick: onCancel, onKeyDown: handleKeyDown },
            React.createElement(FocusTrap, { active: true, returnFocusOnDeactivate: true },
                React.createElement(KeyinPalettePanel, { keyins: keyins, onKeyinExecuted: onItemExecuted })))));
}
//# sourceMappingURL=KeyinPalettePopup.js.map