"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const color_1 = require("../../../../../client/color");
const element_1 = require("../../../../../client/element");
const pointerenter_1 = require("../../../../../client/event/pointer/pointerenter");
const pointerleave_1 = require("../../../../../client/event/pointer/pointerleave");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const theme_1 = require("../../../../../client/theme");
const Component_1 = require("../../Icon/Component");
exports.DEFAULT_STYLE = {
    cursor: 'pointer',
    color: 'currentColor',
    touchAction: 'none',
};
class IconButton extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._hovered = false;
        this._update_color = () => {
            // mergeStyle(this._icon_comp, { color: this._current_color() })
            this._icon_comp.$element.style.color = this._current_color();
        };
        this._current_color = () => {
            const { $theme } = this.$context;
            const { style = {}, active, disabled } = this.$props;
            let { color = 'currentColor' } = style;
            if ((0, color_1.isColorName)(color)) {
                color = (0, color_1.nameToColor)(color);
            }
            const hex = (0, color_1.isHEX)(color);
            const { disabledColor = hex ? (0, theme_1.applyTheme)($theme, color, 75) : 'currentColor', hoverColor = hex ? (0, theme_1.applyTheme)($theme, color, -60) : 'currentColor', activeColor = hex ? (0, theme_1.applyTheme)($theme, color, -90) : 'currentColor', } = this.$props;
            let current_color;
            if (disabled) {
                current_color = disabledColor;
            }
            else if (active) {
                current_color = activeColor;
            }
            else if (this._hovered) {
                current_color = hoverColor;
            }
            else {
                current_color = color;
            }
            return current_color;
        };
        this._on_pointer_enter = () => {
            // console.log('IconButton', '_on_pointer_enter')
            this._hovered = true;
            this._update_color();
        };
        this._on_pointer_leave = () => {
            // console.log('IconButton', '_on_pointer_leave')
            this._hovered = false;
            this._update_color();
        };
        const { className, icon = 'question', title, style = {} } = this.$props;
        const icon_comp = new Component_1.default({
            className,
            icon,
            title,
            style: Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style),
        }, this.$system);
        icon_comp.addEventListener((0, pointerenter_1.makePointerEnterListener)(this._on_pointer_enter));
        icon_comp.addEventListener((0, pointerleave_1.makePointerLeaveListener)(this._on_pointer_leave));
        this._icon_comp = icon_comp;
        const $element = (0, parentElement_1.default)($system);
        this.$element = $element;
        // @ts-ignore
        this.$node = icon_comp.$node;
        this.$slot = { default: icon_comp };
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            icon_comp,
        });
        this.registerRoot(icon_comp);
    }
    onPropChanged(prop, current) {
        // console.log('IconButton', 'onPropChanged')
        if (prop === 'icon') {
            this._icon_comp.setProp('icon', current);
        }
        else if (prop === 'style') {
            this._icon_comp.setProp('style', Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_STYLE), current), { color: this._current_color() }));
        }
        else if (prop === 'active' ||
            prop === 'disabled' ||
            prop === 'activeColor' ||
            prop === 'disabledColor') {
            this._update_color();
        }
    }
}
exports.default = IconButton;
//# sourceMappingURL=Component.js.map