import prefix from '../global/prefix';
import alias from '../global/alias';
import attrValBool from '../utils/attrValBool';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import PlainElem from './PlainElem';
class BuoyElem extends PlainElem {
    constructor() {
        super();
        this.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static get observedAttributes() {
        return ['value', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = BuoyElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'value') {
            this.valueEl.innerHTML = newVal;
        }
        else if (name === 'label') {
            if (newVal === null) {
                this.labelEl.remove();
            }
            else {
                this.labelEl.innerHTML = newVal;
                if (elState(this.labelEl).isVirtual) {
                    if (!elState(this.iconEl).isVirtual) {
                        this.iconEl.insertAdjacentElement('afterEnd', this.labelEl);
                    }
                    else {
                        this.headEl.insertAdjacentElement('afterBegin', this.labelEl);
                    }
                }
            }
        }
        else if (name === 'icon') {
            if (newVal === null) {
                this.iconEl.remove();
            }
            else {
                this.iconEl.setAttribute('class', newVal);
                if (elState(this.iconEl).isVirtual) {
                    this.headEl.insertAdjacentElement('afterBegin', this.iconEl);
                }
            }
        }
        else if (name === 'arrow') {
            if (!attrValBool(newVal)) {
                this.arrowEl.remove();
            }
            else {
                if (elState(this.arrowEl).isVirtual) {
                    this.headEl.appendChild(this.arrowEl);
                }
            }
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...BuoyElem.custAttrs, ...BuoyElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        BuoyElem.boolAttrs.forEach((k) => {
            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) {
        this.wrapEl = createEl('span', { [alias]: 'wrap' });
        this.headEl = createEl('span', { [alias]: 'head' });
        this.labelEl = createEl('i', { [alias]: 'label' }, data.label || '');
        this.iconEl = createEl('i', { class: data.icon || '', [alias]: 'icon' });
        this.arrowEl = createEl('i', { class: `${prefix}icon-down`, [alias]: 'arrow' });
        this.valueEl = createEl('i', { [alias]: 'value' }, data.value || '');
        data.label ? this.headEl.appendChild(this.labelEl) : null;
        data.icon ? this.headEl.insertAdjacentElement('afterBegin', this.iconEl) : null;
        data.arrow ? this.headEl.insertAdjacentElement('beforeEnd', this.arrowEl) : null;
        this.wrapEl.append(this.headEl, this.valueEl);
    }
    render(data) {
        this.append(this.wrapEl);
    }
}
BuoyElem.lazyAttrs = ['stor-name'];
BuoyElem.custAttrs = [
    'class',
    'icon', 'label', 'theme', 'size',
    'on-init', 'on-reset', 'on-set',
];
BuoyElem.boolAttrs = ['reverse', 'arrow'];
window.customElements.define("ax-buoy", BuoyElem);
export default BuoyElem;
