import Tooltip from '../modules/Tooltip';
import createEl from '../utils/createEl';
import getAttrBool from '../utils/getAttrBool';
import isNull from '../utils/isNull';
import PlainElem from './PlainElem';
class BtnElem extends PlainElem {
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = BtnElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'label') {
            this.labelEl.innerHTML = newVal;
        }
        else if (name === 'href') {
            if (newVal === null || oldVal === null) {
                this.innerHTML = '';
                this.fillWrap(this.propsProxy);
                this.render();
            }
            else {
                this.wrapEl.href = newVal;
            }
        }
        else if (name === 'target' && this.wrapEl.nodeName === 'A') {
            this.wrapEl.target = newVal;
        }
        else if (name === 'rel' && this.wrapEl.nodeName === 'A') {
            this.wrapEl.rel = newVal;
        }
        else if (name === 'download' && this.wrapEl.nodeName === 'A') {
            this.wrapEl.download = newVal;
        }
        else if (name === 'tab') {
            this.wrapEl.tabIndex = newVal;
        }
        else if (name === 'icon') {
            if (this.iconEl) {
                this.iconEl.setAttribute('class', newVal);
            }
            else {
                this.insertIcon(newVal);
            }
        }
        else if (name === 'tail') {
            if (this.tailEl) {
                this.tailEl.setAttribute('class', newVal);
            }
            else {
                this.insertTail(newVal);
            }
        }
        else if (name === 'disk') {
            if (this.diskEl) {
                this.diskEl.setAttribute('src', newVal);
            }
            else {
                this.insertDisk(newVal);
            }
        }
        else if (name === 'cube') {
            if (this.cubeEl) {
                this.cubeEl.setAttribute('src', newVal);
            }
            else {
                this.insertCube(newVal);
            }
        }
        else if (name === 'mean') {
            if (this.meanEl) {
                this.meanEl.setAttribute('role', newVal);
            }
            else {
                this.insertMean(newVal);
            }
        }
        else if (name === 'badge') {
            if (this.badgeEl) {
                isNull(newVal) || newVal === '0' ? this.badgeEl.remove() : this.badgeEl.setAttribute('label', newVal);
            }
            else {
                this.insertBadge(newVal);
            }
        }
        else if (name === 'tips') {
            if (this.tipsIns) {
                this.tipsIns.updateCont(newVal);
                if (newVal) {
                    this.tipsIns.popupIns.state !== 'shown' && this.tipsIns.popupIns.show();
                }
                else {
                    this.tipsIns.popupIns.hide();
                }
            }
            else {
                newVal ? this.insertTips(this.propsProxy.tips) : null;
            }
        }
    }
    connectedCallback() {
        !this.querySelector('[role="wrap"]') ? this.appendChild(this.wrapEl) : null;
        this.render();
        this.propsProxy.tips ? this.insertTips(this.propsProxy.tips) : null;
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...BtnElem.custAttrs, ...BtnElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        BtnElem.boolAttrs.forEach((k) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.initLabel();
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
        this.innerHTML = '';
    }
    initLabel() {
        if (this.innerHTML) {
            let child = this.firstElementChild;
            if (child && child.nodeName === 'A') {
                this.propsRaw.href = child.href;
                child.hasAttribute('target') && (this.propsRaw.target = child.target);
                child.hasAttribute('rel') && (this.propsRaw.rel = child.rel);
                child.hasAttribute('download') && (this.propsRaw.download = child.download);
                this.propsRaw.label = child.innerHTML;
            }
            else {
                this.propsRaw.label = this.innerHTML;
            }
        }
        else {
            this.propsRaw.label = this.getAttribute('label');
        }
    }
    getWrap(data) {
        let obj = { role: 'wrap' }, node = '';
        if (!isNull(data.href)) {
            node = 'a';
            obj.href = data.href;
            data.target && (obj.target = data.target);
            data.rel && (obj.rel = data.rel);
        }
        else {
            node = 'span';
        }
        this.wrapEl = createEl(node, obj, this.labelEl);
    }
    insertIcon(val) {
        this.iconEl = createEl('i', { class: val, role: 'icon' });
        this.labelEl.insertAdjacentElement('beforeBegin', this.iconEl);
    }
    insertTail(val) {
        this.tailEl = createEl('i', { class: val, role: 'tail' });
        this.labelEl.insertAdjacentElement('afterEnd', this.tailEl);
    }
    insertMean(val) {
        this.meanEl = createEl('i', { role: val });
        this.wrapEl.appendChild(this.meanEl);
    }
    insertBadge(val) {
        if (!isNull(val) && val !== '0') {
            this.badgeEl = createEl('ax-badge', { role: 'badge' }, val?.trim());
            this.wrapEl.appendChild(this.badgeEl);
        }
    }
    insertDisk(val) {
        if (val) {
            this.diskEl = createEl('img', { role: 'disk', src: val });
            this.labelEl.insertAdjacentElement('beforeBegin', this.diskEl);
        }
    }
    insertCube(val) {
        if (val) {
            this.cubeEl = createEl('img', { role: 'cube', src: val });
            this.labelEl.insertAdjacentElement('beforeBegin', this.cubeEl);
        }
    }
    insertTips(val) {
        if (val) {
            this.tipsIns = new Tooltip(this, {
                content: val,
                trigger: 'sticky',
                deadShow: true,
            });
        }
    }
    fillWrap(data) {
        this.labelEl = createEl('i', { role: 'label' }, data.label);
        this.getWrap(data);
        data.icon ? this.insertIcon(data.icon) : null;
        data.tail ? this.insertTail(data.tail) : null;
        data.mean ? this.insertMean(data.mean) : null;
        data.cube ? this.insertCube(data.cube) : null;
        data.disk ? this.insertDisk(data.disk) : null;
        data.hasOwnProperty('badge') ? this.insertBadge(data.badge) : null;
    }
    render(data) {
        this.appendChild(this.wrapEl);
    }
}
BtnElem.lazyAttrs = ['stor-name'];
BtnElem.custAttrs = ['class', 'type', 'theme', 'href', 'tab', 'target', 'rel', 'download', 'shape', 'size', 'width', 'check', 'icon', 'tail', 'disk', 'cube', 'tips', 'badge', 'mean'];
BtnElem.boolAttrs = ['disabled', 'shaded', 'grad'];
window.customElements.define("ax-btn", BtnElem);
export default BtnElem;
