import createEl from '../utils/createEl';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import PlainElem from './PlainElem';
class LineElem extends PlainElem {
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.fillWrap(this.propsProxy);
    }
    static get observedAttributes() {
        return ['label', ...this.custAttrs, ...this.boolAttrs];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = LineElem.boolAttrs.includes(name) ? getAttrBool(newVal) : newVal;
        if (name === 'label') {
            this.labelEl.innerHTML = newVal;
            if (newVal) {
                (elState(this.labelEl).isVirtual) ? this.wrapEl.append(this.labelEl, this.endEl) : null;
            }
            else {
                this.labelEl.remove();
                this.endEl.remove();
            }
        }
    }
    connectedCallback() {
        this.render();
        this.initialized = true;
        this.listen({ name: 'init' });
    }
    getRawData() {
        [...LineElem.custAttrs, ...LineElem.lazyAttrs].forEach((k) => {
            this.propsRaw[k] = this.getAttribute(k);
        });
        LineElem.boolAttrs.forEach((k) => {
            this.propsRaw[k] = getAttrBool(this.getAttribute(k));
        });
        this.propsRaw.label = this.textContent?.trim() || this.getAttribute('label');
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
        this.innerHTML = '';
    }
    fillWrap(data) {
        this.wrapEl = createEl('div', { role: 'wrap' }, this.labelEl);
        this.startEl = createEl('i', { role: 'start' });
        this.endEl = createEl('i', { role: 'end' });
        this.labelEl = createEl('i', { role: 'label' }, data.label);
        this.wrapEl.appendChild(this.startEl);
        data.label ? this.wrapEl.append(this.labelEl, this.endEl) : null;
    }
    render(data) {
        this.appendChild(this.wrapEl);
    }
}
LineElem.lazyAttrs = ['stor-name'];
LineElem.custAttrs = [
    'class',
    'type', 'theme', 'size', 'align',
    'on-init', 'on-reset',
];
LineElem.boolAttrs = ['v'];
window.customElements.define("ax-line", LineElem);
export default LineElem;
