/**  
 * @since Last modified: 2024-07-11 09:30:49
 * @class ResultElem
 * @description The custom element : ax-result .
 * @see {@link https://codepen.io/axui/pen/ZEPYYgK|demo @ codepen}
 * @example
 * <ax-result to="error"></ax-result>;
 */
import { T_obj } from '../../../types/ax';
import ax from '../ax';
import Observe from '../modules/Observe';
import attrJoinVal from '../utils/attrJoinVal';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import extend from '../utils/extend';
import getAttrBool from '../utils/getAttrBool';
import icons from '../utils/icons';
import PlainElem from './PlainElem';
class ResultElem extends PlainElem {
    iconEl: any;
    labelEl: any;
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
        this.observer.ins.on('complete', () => {
            let content = this.getIcon(this.propsProxy);
            content && (this.iconEl.innerHTML = content);
            if (this.propsProxy.label === null) {
                this.labelEl.remove();
            } else {
                this.labelEl.innerHTML = this.propsProxy.label;
                if (elState(this.labelEl).isVirtual) {
                    this.wrapEl.appendChild(this.labelEl);
                }
            }
        });
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class',
        'to', 'shape', 'type',
        'on-init', 'on-reset', 'on-set',
    ];
    static boolAttrs: string[] = [];
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = ResultElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...ResultElem.custAttrs, ...ResultElem.lazyAttrs].forEach((k: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        ResultElem.boolAttrs.forEach((k: string) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.label = this.innerHTML || this.getAttribute('label');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k]
        }
        this.innerHTML = '';
    }
    fillWrap(data: T_obj) {
        this.wrapEl = createEl('span', { role: 'wrap' });
        this.iconEl = createEl('i', { role: 'icon' }, icons.svg.info);
        this.labelEl = createEl('i', { role: 'label' }, data.label || '');
        this.wrapEl.appendChild(this.iconEl);
    }
    getIcon(data: T_obj) {
        let result = '';
        if (!data.to) {
            result = icons.svg.info;
        } else {
            if (!data.type || data.type === 'svg') {
                result = icons.svg[data.to];
            } else if (data.type === 'font') {
                let icon = data.to + (data.shape === 'thick' ? '-t' : data.shape === 'fill' ? '-f' : '');
                result = icons.font[icon];
            }
        }
        return result;
    }
    render(data?: T_obj) {
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-result", ResultElem);
export default ResultElem;
