/**  
 * @since Last modified: 2024-09-17 00:28:45
 * @class GoodElem
 * @description The custom element : ax-good .
 * @see {@link https://codepen.io/axui/pen/RwOYmzW|demo @ codepen}
 * @example
 * <ax-good>256</ax-good>;
 */
import { T_fn, T_obj } from '../../../types/ax';
import ax from '../ax';
import config from '../global/config';
import prefix from '../global/prefix';
import alias from '../global/alias';
import Observe from '../modules/Observe';
import attrJoinVal from '../utils/attrJoinVal';
import attrValBool from '../utils/attrValBool';
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 setAttr from '../utils/setAttr';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';
class GoodElem extends PlainElem {
    wrapEl: any;
    labelEl: any;
    iconEl: any;
    tipsEl: any;
    valueEl: any;
    reset: any;
    increase: any;
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
        this.increase = (step: number = 1, cb?: T_fn) => {
            let value = parseInt(this.properties.value) + step,
                tips = this.getAttribute('tips');
            this.setAttribute('value', String(value));
            tips ? this.setAttribute('tips', tips) : null;
            this.setAttribute('done', '');
            cb && cb.call(this, value);
        }
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class',
        'icon', 'label', 'tips',
        'on-init', 'on-reset','on-set',
    ];
    static boolAttrs = ['done', 'disabled'];
    static get observedAttributes() {
        return ['value', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = GoodElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'value') {
            this.valueEl.innerHTML = newVal;
        } else if (name === 'label') {
            this.labelEl.innerHTML = newVal;
        } else if (name === 'tips') {
            this.tipsEl.innerHTML = newVal;
        } else if (name === 'icon') {
            if (newVal === null) {
                this.iconEl.remove();
            } else {
                this.iconEl.setAttribute('class', newVal);
                elState(this.iconEl).isVirtual && this.wrapEl.insertAdjacentElement('afterBegin', this.iconEl);
            }
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...GoodElem.custAttrs, ...GoodElem.lazyAttrs].forEach((k: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        GoodElem.boolAttrs.forEach((k: string) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.value = this.textContent?.trim() || this.getAttribute('value');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k]
        }
        this.innerHTML = '';
    }
    fillWrap(data: T_obj) {
        this.wrapEl = createEl('span', { [alias]: 'wrap' });
        this.labelEl = createEl('i', { [alias]: 'label' }, data.label || '');
        this.iconEl = createEl('i', { class: data.icon || '', [alias]: 'icon' });
        this.valueEl = createEl('i', { [alias]: 'value' }, data.value || '');
        this.tipsEl = createEl('i', { [alias]: 'tips' }, data.tips || '');
        this.wrapEl.appendChild(this.valueEl);
    }
    render(data?: T_obj) {
        this.append(this.labelEl, this.wrapEl, this.tipsEl);
    }
}
window.customElements.define("ax-good", GoodElem);
export default GoodElem;
