"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = exports.TOOLTIP_HEIGHT = exports.TOOLTIP_WIDTH = void 0;
const addListener_1 = require("../../../../../client/addListener");
const mergeStyle_1 = require("../../../../../client/component/mergeStyle");
const element_1 = require("../../../../../client/element");
const custom_1 = require("../../../../../client/event/custom");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const Component_1 = require("../../Div/Component");
const Component_2 = require("../../value/Text/Component");
exports.TOOLTIP_WIDTH = 30;
exports.TOOLTIP_HEIGHT = 30;
exports.DEFAULT_STYLE = {
    position: 'relative',
    minWidth: `${exports.TOOLTIP_WIDTH}px`,
    width: 'fit-content',
    height: `${exports.TOOLTIP_HEIGHT}px`,
    margin: '0',
    background: '#000000aa',
    borderRadius: '3px',
    border: '2px solid currentcolor',
    color: 'currentColor',
    boxSizing: 'border-box',
};
class Tooltip extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._refresh_background_color = () => {
            if (this.$context) {
                const { $theme } = this.$context;
                const background = $theme === 'dark' ? '#000000aa' : '#ffffffaa';
                (0, mergeStyle_1.mergePropStyle)(this._tooltip, {
                    background,
                });
            }
        };
        const { className, icon, style = {}, shortcut } = this.$props;
        const tooltip = new Component_1.default({
            style: {
                ...exports.DEFAULT_STYLE,
                ...style,
            },
            attr: {
                popover: 'manual',
            },
        }, this.$system);
        this._tooltip = tooltip;
        const tooltipContent = new Component_1.default({
            style: {
                display: 'flex',
                width: 'fit-content',
                minWidth: '100%',
                height: '100%',
                alignItems: 'center',
                justifyContent: 'center',
                fontWeight: 'bold',
            },
        }, this.$system);
        const tooltipText = new Component_2.default({
            value: shortcut,
        }, this.$system);
        tooltipContent.registerParentRoot(tooltipText);
        // Firefox hasn't implemented popover yet, so just don't ever display it
        if (!this._tooltip.$element.showPopover) {
            this._tooltip.$element.style.display = 'none';
        }
        tooltip.registerParentRoot(tooltipContent);
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$node = tooltip.$node;
        this.$slot = { default: tooltipContent };
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            tooltip,
            tooltipContent,
        });
        this.registerRoot(tooltip);
        this._refresh_background_color();
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._tooltip.setProp('style', { ...exports.DEFAULT_STYLE, ...current });
        }
    }
    show(x, y) {
        if (this._tooltip.$element.showPopover) {
            (0, mergeStyle_1.mergePropStyle)(this._tooltip, {
                left: `${x}px`,
                top: `${y - 3}px`,
            });
            this._tooltip.$element.showPopover();
        }
    }
    hide() {
        if (this._tooltip.$element.hidePopover) {
            this._tooltip.$element.hidePopover();
        }
    }
    onMount() {
        this._context_unlisten = (0, addListener_1.addListeners)(this.$context, [
            (0, custom_1.makeCustomListener)('themechanged', this._refresh_background_color),
        ]);
    }
    onUnmount() {
        this._context_unlisten();
    }
}
exports.default = Tooltip;
//# sourceMappingURL=Component.js.map