"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const classnames_1 = require("../../../../../client/classnames");
const element_1 = require("../../../../../client/element");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const Component_1 = require("../../../component/app/IconButton/Component");
const Component_2 = require("../Tooltip/Component");
exports.DEFAULT_STYLE = {
    width: '21px',
    height: '21px',
};
class ModeIconButton extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        const { title, shortcut } = this.$props;
        const { className, icon, activeColor, hoverColor, active, style = {}, } = this.$props;
        const icon_button = new Component_1.default({
            className: (0, classnames_1.classnames)('mode-button', className),
            icon,
            style: {
                ...exports.DEFAULT_STYLE,
                ...style,
            },
            title,
            active,
            activeColor,
            hoverColor: hoverColor || activeColor,
        }, this.$system);
        icon_button.preventDefault('mousedown');
        icon_button.preventDefault('touchdown');
        this._icon_button = icon_button;
        const tooltip = new Component_2.default({
            shortcut,
        }, this.$system);
        this._tooltip = tooltip;
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$slot = { default: icon_button };
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            icon_button,
        });
        this.registerRoot(icon_button);
        this.registerRoot(tooltip);
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._icon_button.setProp('style', { ...exports.DEFAULT_STYLE, ...current });
        }
        else if (prop === 'active') {
            this._icon_button.setProp('active', current);
        }
        else if (prop === 'activeColor') {
            this._icon_button.setProp('activeColor', current);
        }
        else if (prop === 'hoverColor') {
            this._icon_button.setProp('hoverColor', current);
        }
    }
    showTooltip() {
        const bbox = this._icon_button.getBoundingClientRect();
        this._tooltip.show(bbox.x + 30 + 1.5, bbox.y);
    }
    hideTooltip() {
        this._tooltip.hide();
    }
}
exports.default = ModeIconButton;
//# sourceMappingURL=Component.js.map