"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const applyAttr_1 = require("../../../../client/applyAttr");
const namespaceURI_1 = require("../../../../client/component/namespaceURI");
const element_1 = require("../../../../client/element");
const ensureIcon_1 = require("../../../../client/ensureIcon");
const propHandler_1 = require("../../../../client/propHandler");
const style_1 = require("../../../../client/style");
const userSelect_1 = require("../../../../client/util/style/userSelect");
const DEFAULT_STYLE = Object.assign({ display: 'flex', width: '100%', height: '100%', strokeWidth: '1.5px', strokeLinecap: 'round', strokeLinejoin: 'round', stroke: 'currentColor', fill: 'transparent' }, (0, userSelect_1.userSelect)('none'));
class Icon extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        let { className, icon, style = {}, attr = {}, x, y, width, height, tabIndex, } = $props;
        const { title } = this.$props;
        const $element = this.$system.api.document.createElementNS(namespaceURI_1.namespaceURI, 'svg');
        if (className) {
            $element.classList.add(className);
        }
        if (x !== undefined) {
            $element.setAttribute('x', `${x}`);
        }
        if (y !== undefined) {
            $element.setAttribute('y', `${y}`);
        }
        if (width !== undefined) {
            $element.setAttribute('width', `${width}`);
        }
        if (height !== undefined) {
            $element.setAttribute('height', `${height}`);
        }
        if (tabIndex !== undefined) {
            $element.tabIndex = tabIndex;
        }
        if (title) {
            const title_el = this.$system.api.document.createElementNS(namespaceURI_1.namespaceURI, 'title');
            title_el.innerHTML = title;
            $element.appendChild(title_el);
        }
        if (attr) {
            (0, applyAttr_1.default)($element, attr);
        }
        this._svg_el = $element;
        const icon_sprite_el = this.$system.api.document.createElementNS(namespaceURI_1.namespaceURI, 'use');
        icon_sprite_el.setAttribute('href', `#${icon}`);
        this._icon_sprite_el = icon_sprite_el;
        $element.appendChild(icon_sprite_el);
        this.$element = $element;
        if (icon !== undefined) {
            (0, ensureIcon_1.ensureIcon)(this.$system, icon);
        }
        // applyStyle($element, {
        //   ...DEFAULT_STYLE,
        //   ...style,
        // })
        (0, style_1.applyDynamicStyle)(this, this.$element, Object.assign(Object.assign({}, DEFAULT_STYLE), style));
        this.preventDefault('touchstart');
        this._prop_handler = Object.assign(Object.assign({}, (0, propHandler_1.elementPropHandler)(this, this.$element, DEFAULT_STYLE)), { icon: (icon = '') => {
                (0, ensureIcon_1.ensureIcon)(this.$system, icon);
                this._icon_sprite_el.setAttribute('href', `#${icon}`);
            } });
    }
    onPropChanged(prop, current) {
        this._prop_handler[prop](current);
    }
}
exports.default = Icon;
//# sourceMappingURL=Component.js.map