"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UICallout = exports.getCalloutStyle = exports.UICalloutContentPadding = exports.CALLOUT_STYLES = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const utilities_1 = require("../../utilities");
require("../../styles/_shadows.scss");
exports.CALLOUT_STYLES = {
    background: 'var(--vscode-editorWidget-background)',
    boxShadow: 'var(--ui-box-shadow-small)',
    borderColor: 'var(--vscode-editorWidget-border)',
    text: 'var(--vscode-editorWidget-foreground)',
    borderRadius: 4
};
var UICalloutContentPadding;
(function (UICalloutContentPadding) {
    UICalloutContentPadding["None"] = "None";
    UICalloutContentPadding["Standard"] = "Standard";
})(UICalloutContentPadding || (exports.UICalloutContentPadding = UICalloutContentPadding = {}));
// Control content padding with different states to avoid different hardcoded values across extensions
const CALLOUT_CONTENT_PADDING = new Map([[UICalloutContentPadding.Standard, 8]]);
/**
 * Method receives callout style and extracts into raw styles object.
 *
 * @param {IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined} styles Callout styles.
 * @param {keyof ICalloutContentStyles} name Callout style type.
 * @returns {IRawStyle} Raw style object.
 */
const extractRawStyles = (styles, name) => {
    if (typeof styles === 'object' && typeof styles[name] === 'object') {
        return styles[name];
    }
    return {};
};
const getCalloutStyle = (props) => {
    return {
        root: {
            boxShadow: exports.CALLOUT_STYLES.boxShadow,
            backgroundColor: exports.CALLOUT_STYLES.background,
            borderRadius: exports.CALLOUT_STYLES.borderRadius,
            border: `1px solid ${exports.CALLOUT_STYLES.borderColor}`,
            ...extractRawStyles(props.styles, 'root')
        },
        beak: {
            backgroundColor: exports.CALLOUT_STYLES.background,
            boxShadow: exports.CALLOUT_STYLES.boxShadow,
            ...extractRawStyles(props.styles, 'beak')
        },
        beakCurtain: {
            backgroundColor: exports.CALLOUT_STYLES.background,
            borderRadius: exports.CALLOUT_STYLES.borderRadius,
            ...extractRawStyles(props.styles, 'beakCurtain')
        },
        calloutMain: {
            backgroundColor: 'transparent',
            color: exports.CALLOUT_STYLES.text,
            borderRadius: exports.CALLOUT_STYLES.borderRadius,
            minWidth: props.calloutMinWidth ?? 300,
            boxSizing: 'border-box',
            padding: CALLOUT_CONTENT_PADDING.get(props.contentPadding ?? UICalloutContentPadding.None),
            ...extractRawStyles(props.styles, 'calloutMain')
        },
        container: extractRawStyles(props.styles, 'container')
    };
};
exports.getCalloutStyle = getCalloutStyle;
/**
 * UICallout component.
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
 *
 * @exports
 * @class UICallout
 * @extends {React.Component<ICalloutProps, {}>}
 */
class UICallout extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UICalloutProps} props
     */
    constructor(props) {
        super(props);
        this.onKeyDown = this.onKeyDown.bind(this);
    }
    /**
     * Method handles keydown event.
     * If "focusTargetSiblingOnTabPress" property is set and 'Tab' key is pressed,
     *  then method tries to focus next/previous sibling based on target.
     *
     * @param event Keydown event
     */
    onKeyDown(event) {
        const { onKeyDown, focusTargetSiblingOnTabPress, target } = this.props;
        if (focusTargetSiblingOnTabPress && event.key === 'Tab' && target) {
            let targetRef = null;
            if (typeof target === 'string') {
                const currentDoc = (0, react_2.getDocument)();
                targetRef = currentDoc?.querySelector(target);
            }
            else if ('getBoundingClientRect' in target && (0, utilities_1.isHTMLElement)(target)) {
                targetRef = target;
            }
            if (targetRef && (0, utilities_1.focusToSibling)(targetRef, !event.shiftKey)) {
                // Stop event bubbling to avoid default browser behavior
                event.stopPropagation();
                event.preventDefault();
            }
        }
        // Call external subscriber
        onKeyDown?.(event);
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        return (react_1.default.createElement(react_2.Callout, { ...this.props, onKeyDown: this.onKeyDown, styles: (0, exports.getCalloutStyle)(this.props) }, this.props.children));
    }
}
exports.UICallout = UICallout;
//# sourceMappingURL=UICallout.js.map