/**  
 * @since Last modified: 2024-07-11 09:30:49
 * @class IconElem
 * @description The custom element : ax-icon .
 * @see {@link https://codepen.io/axui/pen/dyLmxBo|demo @ codepen}
 * @example
 * <ax-icon>256</ax-icon>;
 */
import { T_el, T_obj } from '../../../types/ax';
import ax from '../ax';
import prefix from '../global/prefix';
import classes from '../utils/classes';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import icons from '../utils/icons';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';
class IconElem extends PlainElem {
    wrapEl: any;
    badgeEl: any;
    tipsEl: any;
    iconEl: any;
    cubeEl: any;
    diskEl: any;
    headEl:any;
    legendEl: any;
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class',
        'tips', 'type', 'badge', 'dir', 'bg', 'href', 'target', 'rel',
        'on-init', 'on-reset',
    ];
    static boolAttrs = ['disabled'];
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = IconElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'badge') {
            if (newVal === null) {
                this.badgeEl.remove();
            } else {
                this.badgeEl.setAttribute('label',newVal.trim());
                elState(this.badgeEl).isVirtual && this.headEl.appendChild(this.badgeEl);
            }
        } else if (name === 'href') {
            if (newVal === null) {
                let children = this.wrapEl.children;
                this.wrapEl = createEl('div', { role: 'wrap' });
                this.wrapEl.append(...children);
                this.render();
            } else {
                if (this.wrapEl.nodeName !== 'A') {
                    this.wrapEl = createEl('a', { role: 'wrap' }, [...this.wrapEl.children]);
                    this.render();
                }
                this.wrapEl.href = newVal;
            }
        } else if (['target', 'rel'].includes(name) && this.wrapEl.nodeName === 'A') {
            this.wrapEl[name] = newVal;
        } else if (name === 'tips') {
            if (newVal === null) {
                this.tipsEl.remove();
            } else {
                this.tipsEl.innerHTML = newVal;
                this.wrapEl.appendChild(this.tipsEl);
            }
        } else if (name === 'bg') {
           this.setLegendBg(newVal,oldVal);
        } else if (name === 'type') {
            this.toggleLegend(newVal);
        } else if (name === 'label') {
            if (newVal === null) {
                this.toggleLegend();
            } else {
                if(this.legendEl.nodeName ==='I'){
                    this.legendEl.setAttribute('class', newVal);
                }else{
                    this.legendEl.querySelector('img').src = newVal;
                }
            }
        }
    }
    connectedCallback() {
        !this.hasAttribute('dir') && this.setAttribute('dir', 'h');
        !this.hasAttribute('type') && this.setAttribute('type', 'icon');
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        [...IconElem.custAttrs, ...IconElem.lazyAttrs].forEach((k: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        IconElem.boolAttrs.forEach((k: string) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.label = this.textContent?.trim() || this.getAttribute('label');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k]
        }
        this.innerHTML = '';
    }
    fillWrap(data: T_obj) {
        this.headEl = createEl('span', { role: 'head' });
        this.wrapEl = createEl(data.href ? 'a' : 'div', { role: 'wrap' },this.headEl);
        this.iconEl = createEl('i', { role: 'icon', class: data.label });
        this.diskEl = createEl('span', { role: 'disk' }, `<img src="${data.label}"/>`);
        this.cubeEl = createEl('span', { role: 'cube' }, `<img src="${data.label}"/>`);
        this.tipsEl = createEl('div', { role: 'tips' }, data.tips);
        this.legendEl = this.iconEl;
        this.badgeEl = createEl('ax-badge', { role: 'badge' }, data?.badge?.trim());
    }
    setLegendBg(theme: string,old:string) {
        if (theme) {
            classes.replace(this.iconEl,`${prefix}bg-${theme}`,`${prefix}bg-${old}`);
            classes.replace(this.diskEl,`${prefix}bg-${theme}`,`${prefix}bg-${old}`);
            classes.replace(this.cubeEl,`${prefix}bg-${theme}`,`${prefix}bg-${old}`);
        }else{
            this.iconEl.classList.remove(`${prefix}bg-${old}`);
            this.diskEl.classList.remove(`${prefix}bg-${old}`);
            this.cubeEl.classList.remove(`${prefix}bg-${old}`);
        }
    }
    toggleLegend(type?: string) {
        let map = [{
            type: 'icon',
            show: this.iconEl,
            hide: [this.diskEl, this.cubeEl],
        }, {
            type: 'disk',
            show: this.diskEl,
            hide: [this.iconEl, this.cubeEl],
        }, {
            type: 'cube',
            show: this.cubeEl,
            hide: [this.diskEl, this.iconEl],
        }]
        let item = map.find((k: any) => k.type === type);
        if (item) {
            item.hide.forEach((k: any) => {
                k.remove();
            });
            elState(item.show).isVirtual && this.headEl.insertAdjacentElement('afterbegin', item.show);
            this.legendEl = item.show;
        } else {
            this.iconEl.remove();
            this.cubeEl.remove();
            this.diskEl.remove();
        }
    }
    render() {
        this.innerHTML = '';
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-icon", IconElem);
export default IconElem;
