/**  
 * @since Last modified: 2024-09-17 00:31:16
 * @class RadioElem
 * @description The custom element : ax-radio .
 * @see {@link https://codepen.io/axui/pen/bGJWLbg|demo @ codepen}
 * @example
 * <ax-radio name="demo" value="book" label="Reading"></ax-radio>;
 */
import { T_el, T_obj } from '../../../types/ax';
import alias from '../global/alias';
import createEl from '../utils/createEl';
import getAttrBool from '../utils/getAttrBool';
import getEls from '../utils/getEls';
import PlainElem from './PlainElem';
class RadioElem extends PlainElem {
    labelEl: any;
    inputEl: any;
    legendEl: any;
    check: any;
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
        this.reset = () => {
            for (let k in this.propsRaw) {
                (this.propsRaw[k] !== null && this.propsRaw[k] !== false) ? this.setAttribute(k, this.propsRaw[k]) : this.removeAttribute(k);
            }
            this.listen({ name: 'reset' });
        }
        this.clear = () => {
            this.setAttribute('check', '');
            this.listen({ name: 'clear' });
        }
        this.check = (val: string) => {
            this.setAttribute('check', val);
            this.listen({ name: 'check', params: [val] });
        }
        this.observer.ins.on('set', (data: T_obj) => {
            if (data.key === 'check') {
                this.listen({ name: 'change', params: [data.value] });
            }
            this.initialized && this.updateCache({ [data.key]: data.value });
        });
    }
    static lazyAttrs = ['stor-name'];
    static custAttrs = [
        'class',
        'size', 'value', 'name', 'type', 'check',
        'on-change', 'on-init', 'on-set', 'on-reset', 'on-clear'
    ];
    static boolAttrs = ['disabled'];
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        this.propsProxy[name] = RadioElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (['disabled', 'value', 'name'].includes(name)) {
            this.inputEl[name] = this.propsProxy[name];
            if (name === 'value') {
                (!newVal && this.propsProxy.label) && (this.propsProxy.value = this.propsProxy.label);
            }
        } else if (name === 'label') {
            this.labelEl.innerHTML = newVal;
            (newVal && !this.propsProxy.value) && (this.propsProxy.value = newVal);
        } else if (name === 'check') {
            this.inputEl.checked = (newVal === 'ed' ? true : false);
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        [...RadioElem.custAttrs, ...RadioElem.lazyAttrs].forEach((k: string) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        RadioElem.boolAttrs.forEach((k: string) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.label = this.getAttribute('label') || this.innerHTML;
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k]
        }
        this.innerHTML = '';
    }
    fillWrap(data: T_obj) {
        this.wrapEl = createEl('label', { [alias]: 'wrap' });
        this.inputEl = createEl('input', { type: 'radio', value: (data.value === null || data.value === '') ? data.label : data.value });
        this.legendEl = createEl('u');
        this.labelEl = createEl('i', '', data.label);
        this.wrapEl.append(this.inputEl, this.legendEl, this.labelEl);
    }
    render() {
        this.appendChild(this.wrapEl);
        this.inputEl.addEventListener('change', (e: any) => {
            this.setAttribute('check', 'ed');
            let others = getEls(`ax-radio[name=${this.propsProxy.name}]`, this.closest('form')).filter((k: any) => k !== this);
            others.forEach((k: any) => {
                k.setAttribute('check', '');
            });
        }, false);
    }
}
window.customElements.define("ax-radio", RadioElem);
export default RadioElem;
