/**  
 * @since Last modified: 2024-07-11 09:30:49
 * @class StatsElem
 * @description The custom element : ax-stats .
 * @see {@link https://codepen.io/axui/pen/dyLmxBo|demo @ codepen}
 * @example
 * <ax-stats>256</ax-stats>;
 */
import { T_el, T_obj } from '../../../types/ax';
import ax from '../ax';
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 StatsElem extends PlainElem {
    wrapEl: any;
    mainEl: any;
    badgeEl: any;
    tipsEl: any;
    labelEl: any;
    unitEl: any;
    iconEl: any;
    cubeEl: any;
    diskEl: any;
    headEl: any;
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class',
        'unit', 'tips', 'layout', 'icon', 'disk', 'cube', 'badge','dir',
        'on-init', 'on-reset','on-set',
    ];
    static boolAttrs = ['reverse','disabled'];
    static get observedAttributes() {
        return ['label', ...this.custAttrs,...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] =  StatsElem.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.labelEl.appendChild(this.badgeEl)
            }
        } else if (name === 'icon') {
            if (newVal === null) {
                this.iconEl.remove();
            } else {
                this.iconEl.setAttribute('class', newVal);
                if (elState(this.iconEl).isVirtual) {
                    this.diskEl.remove();
                    this.cubeEl.remove();
                    this.wrapEl.insertAdjacentElement('afterbegin', this.iconEl);
                }
            }
        } else if (name === 'disk') {
            if (newVal === null) {
                this.diskEl.remove();
            } else {
                this.diskEl.querySelector('img').src = newVal;
                if (elState(this.diskEl).isVirtual) {
                    this.iconEl.remove();
                    this.cubeEl.remove();
                    this.wrapEl.insertAdjacentElement('afterbegin', this.diskEl);
                }
            }
        } else if (name === 'cube') {
            if (newVal === null) {
                this.cubeEl.remove();
            } else {
                this.cubeEl.querySelector('img').src = newVal;
                if (elState(this.cubeEl).isVirtual) {
                    this.diskEl.remove();
                    this.iconEl.remove();
                    this.wrapEl.insertAdjacentElement('afterbegin', this.cubeEl);
                }
            }
        } else if (name === 'tips') {
            if (newVal === null) {
                this.tipsEl.remove();
            } else {
                this.tipsEl.innerHTML = newVal;
                this.mainEl.appendChild(this.tipsEl);
            }
        } else if (name === 'unit') {
            if (newVal === null) {
                this.unitEl.remove();
            } else {
                this.unitEl.innerHTML = newVal;
                this.headEl.appendChild(this.unitEl);
            }
        }else if (name === 'label') {
            this.labelEl.innerHTML = newVal || '';
        }
    }
    connectedCallback() {
        !this.hasAttribute('dir') && this.setAttribute('dir','v');
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...StatsElem.custAttrs, ...StatsElem.lazyAttrs].forEach((k: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        StatsElem.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.wrapEl = createEl('div', { role: 'wrap' });
        this.mainEl = createEl('div', { role: 'main' });
        this.iconEl = createEl('i', { role: 'icon', class: data.icon });
        this.diskEl = createEl('span', { role: 'disk' }, `<img src="${data.disk}"/>`);
        this.cubeEl = createEl('span', { role: 'cube' }, `<img src="${data.cube}"/>`);
        this.labelEl = createEl('i', { role: 'label' }, data.label);
        this.headEl = createEl('div', { role: 'head' }, this.labelEl);
        this.tipsEl = createEl('div', { role: 'tips' }, data.tips);
        this.unitEl = createEl('i', { role: 'unit' }, data.unit);
        this.badgeEl = createEl('ax-badge', { role: 'badge' }, data?.badge?.trim());
        this.mainEl.appendChild(this.headEl);
        this.wrapEl.appendChild(this.mainEl);
    }
    render() {
        this.innerHTML = '';
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-stats", StatsElem);
export default StatsElem;
