/**  
 * @since Last modified: 2024-09-17 00:28:01
 * @class BtnElem
 * @description The custom element : ax-btn .
 * @see {@link https://codepen.io/axui/pen/xxeWXvd|demo @ codepen}
 * @example
 * <ax-btn>BTN</ax-btn>;
 */
import { T_el, T_obj } from '../../../types/ax';
import ax from '../ax';
import alias from '../global/alias';
import Popup from '../modules/Popup';
import Tooltip from '../modules/Tooltip';
import createEl from '../utils/createEl';
import getAttrBool from '../utils/getAttrBool';
import isNull from '../utils/isNull';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';
class BtnElem extends PlainElem {
    custAttrs: any;
    boolAttrs: any;
    labelEl: any;
    iconEl: any;
    tailEl: any;
    diskEl: any;
    cubeEl: any;
    badgeEl: any;
    meanEl: any;
    wrapEl: any;
    tipsIns: any;
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = ['class', 'type', 'theme', 'href', 'tab', 'target', 'rel', 'download', 'shape', 'size', 'width', 'check', 'icon', 'tail', 'disk', 'cube', 'tips', 'badge', 'mean'];
    static boolAttrs = ['disabled', 'shaded', 'grad'];
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        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(alias, 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(`[${alias}="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: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        BtnElem.boolAttrs.forEach((k: string) => {
            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 as HTMLAnchorElement).href;
                child.hasAttribute('target') && (this.propsRaw.target = (child as HTMLAnchorElement).target);
                child.hasAttribute('rel') && (this.propsRaw.rel = (child as HTMLAnchorElement).rel);
                child.hasAttribute('download') && (this.propsRaw.download = (child as HTMLAnchorElement).download);
                this.propsRaw.label = child.innerHTML;
            }else{
                this.propsRaw.label = this.innerHTML;
            }
        }else{
            this.propsRaw.label = this.getAttribute('label');
        }
    }
    getWrap(data: T_obj) {
        let obj: T_obj = { [alias]: '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: string) {
        this.iconEl = createEl('i', { class: val, [alias]: 'icon' });
        this.labelEl.insertAdjacentElement('beforeBegin', this.iconEl);
    }
    insertTail(val: string) {
        this.tailEl = createEl('i', { class: val, [alias]: 'tail' });
        this.labelEl.insertAdjacentElement('afterEnd', this.tailEl);
    }
    insertMean(val: string) {
        this.meanEl = createEl('i', { [alias]: val });
        this.wrapEl.appendChild(this.meanEl);
    }
    insertBadge(val: string) {
        if (!isNull(val) && val !== '0') {
            this.badgeEl = createEl('ax-badge', { [alias]: 'badge' }, val?.trim());
            this.wrapEl.appendChild(this.badgeEl);
        }
    }
    insertDisk(val: string) {
        if (val) {
            this.diskEl = createEl('img', { [alias]: 'disk', src: val });
            this.labelEl.insertAdjacentElement('beforeBegin', this.diskEl);
        }
    }
    insertCube(val: string) {
        if (val) {
            this.cubeEl = createEl('img', { [alias]: 'cube', src: val });
            this.labelEl.insertAdjacentElement('beforeBegin', this.cubeEl);
        }
    }
    insertTips(val: string) {
        if (val) {
            this.tipsIns = new Tooltip(this, {
                content: val,
                trigger: 'sticky',
                deadShow: true,
            });
        }
    }
    fillWrap(data: T_obj) {
        this.labelEl = createEl('i', { [alias]: '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?: T_obj) {
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-btn", BtnElem);
export default BtnElem;
