import prefix from '../global/prefix';
import alias from '../global/alias';
import classes from '../utils/classes';
import createEl from '../utils/createEl';
import getAttrArr from '../utils/getAttrArr';
import getAttrBool from '../utils/getAttrBool';
import isNull from '../utils/isNull';
import PlainElem from './PlainElem';
class RadiosElem extends PlainElem {
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
        this.reset = () => {
            for (let k in this.propsRaw) {
                k === 'data' ? this.updateInputs(this.propsRaw[k], 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.setValues = (value) => {
            let val = Array.isArray(value) ? value[0] : value;
            this.setAttribute('check', val);
            this.listen({ name: 'check', params: [val] });
        };
        this.setLabels = (label) => {
            let lbl = Array.isArray(label) ? label[0] : label;
            let tmp = this.inputs.find((i) => i.propsProxy.label == lbl);
            if (tmp) {
                this.setAttribute('check', tmp.propsProxy.value);
                this.listen({ name: 'check', params: [tmp.propsProxy.value] });
            }
        };
        this.observer.ins.on('set', (data) => {
            if (data.key === 'value') {
                this.initialized && this.updateCache({ check: data.value });
                this.listen({ name: 'change', params: [data.value] });
            }
            else {
                this.initialized && this.updateCache({ [data.key]: data.value });
            }
        });
    }
    static get observedAttributes() {
        return ['data', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = RadiosElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'data') {
            this.updateInputs(newVal);
        }
        else if (name === 'disabled') {
            this.setAttribute('disabled', '');
        }
        else if (['name', 'type', 'size'].includes(name)) {
            this.inputs.forEach((k) => {
                k.setAttribute(name, newVal);
            });
        }
        else if (name === 'check') {
            if (!newVal) {
                /*                 let tmp = this.inputs.find((k: any) => k.propsProxy.check === 'ed');
                                tmp && tmp.removeAttribute('check'); */
                this.inputs.forEach((k) => {
                    k.check('');
                });
            }
            else {
                /*     let tmp = this.inputs.find((k: any) => k.propsProxy.value === newVal);
                    tmp && tmp.setAttribute('check', 'ed'); */
                this.inputs.forEach((k) => {
                    if (k.propsProxy.value === newVal) {
                        k.check('ed');
                    }
                    else {
                        k.check('');
                    }
                });
            }
        }
        else if (name === 'disable') {
            let value = getAttrArr(newVal);
            value.forEach((k) => {
                let tmp = this.inputs.find((i) => i.propsProxy.value === k);
                tmp && tmp.setAttribute('disabled', '');
            });
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...RadiosElem.custAttrs, ...RadiosElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        RadiosElem.boolAttrs.forEach((k) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        let tmp = this.getAttribute('data') ? getAttrArr(this.getAttribute('data')) : getAttrArr(this.innerHTML.replace(/\n/g, '').trim());
        this.propsRaw.data = this.formatData(tmp);
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
        this.innerHTML = '';
    }
    fillWrap(data) {
        this.wrapEl = createEl('div', { [alias]: 'wrap' });
        data['wrap-classes'] ? classes.add(this.wrapEl, data['wrap-classes']) : null;
        if (data.layout === 'grid') {
            this.wrapEl.classList.add(`${prefix}grid`);
            data.cols && this.wrapEl.classList.add(`${prefix}avg-${data.cols}`);
        }
        else if (data.layout === 'flex') {
            this.wrapEl.classList.add(`${prefix}row`);
        }
        this.updateInputs(data.data, data);
    }
    updateInputs(data, host = this.propsProxy) {
        this.inputs = [];
        this.wrapEl.innerHTML = '';
        let tmp = Array.isArray(data) ? data : getAttrArr(data);
        this.formatData(tmp).forEach((k) => {
            let parent = createEl('div'), input = createEl('ax-radio', { name: host.name, label: k.label, value: isNull(k.value) ? k.label : k.value, check: k.checked ? 'ed' : '' });
            k.disabled && input.setAttribute('disabled', '');
            host['input-classes'] && classes.add(input, host['input-classes']);
            this.inputs.push(input);
            if (host.layout) {
                host.layout === 'flex' && parent.classList.add(`${prefix}flex`);
                host['item-classes'] && classes.add(parent, host['item-classes']);
                parent.appendChild(input);
                this.wrapEl.appendChild(parent);
            }
            else {
                this.wrapEl.appendChild(input);
            }
            input.on('change', () => {
                let eds = this.inputs.find((i) => i.propsProxy.check === 'ed');
                this.propsProxy.value = eds ? eds.propsProxy.value : '';
            });
        });
    }
    formatData(data) {
        let itemType = typeof data[0];
        if (itemType === 'string') {
            return data.map((k) => {
                return { label: k, value: k, disabled: false, checked: false };
            });
        }
        else {
            return data;
        }
    }
    render() {
        this.appendChild(this.wrapEl);
    }
}
RadiosElem.lazyAttrs = ['stor-name'];
RadiosElem.custAttrs = [
    'class',
    'size', 'name', 'type', 'layout', 'cols', 'check', 'disable', 'data', 'wrap-classes', 'item-classes', 'input-classes',
    'on-change', 'on-init', 'on-set', 'on-reset', 'on-clear'
];
RadiosElem.boolAttrs = ['disabled'];
window.customElements.define("ax-radios", RadiosElem);
export default RadiosElem;
