import createEl from '../utils/createEl';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import icons from '../utils/icons';
import PlainElem from './PlainElem';
class AvatarElem extends PlainElem {
    constructor() {
        super();
        super.createObs();
        this.getRawData();
        this.render(this.propsProxy);
    }
    static get observedAttributes() {
        return ['class', 'type', 'theme', 'tips', 'size', 'src', 'shape', 'badge', 'href', 'target', 'rel'];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this.propsProxy[name] = newVal;
        if (name === 'type') {
            if ((this.mainEl.nodeName === 'IMG' && newVal === 'text') || (this.mainEl.nodeName === 'I' && (newVal === 'image' || !newVal))) {
                this.mainEl.remove();
                this.mainEl = this.getMainEl(newVal, this.propsProxy.src);
                this.wrapEl.appendChild(this.mainEl);
            }
        }
        else if (name === 'tips') {
            if (newVal === null) {
                this.tipsEl.remove();
            }
            else {
                this.tipsEl.innerHTML = newVal;
                (elState(this.tipsEl).isVirtual) ? this.wrapEl.appendChild(this.tipsEl) : null;
            }
        }
        else if (name === 'badge') {
            if (newVal === null) {
                this.badgeEl.remove();
            }
            else {
                this.badgeEl.setAttribute('label', (newVal === '0' || !newVal) ? '' : newVal);
                (elState(this.badgeEl).isVirtual) ? this.wrapEl.appendChild(this.badgeEl) : null;
            }
        }
        else if (name === 'src') {
            (this.propsProxy.type === 'text') ? this.mainEl.innerHTML = newVal : this.mainEl.src = newVal;
        }
        else if (name === 'href') {
            this.wrapEl.setAttribute('href', newVal);
        }
        else if (name === 'target') {
            this.wrapEl.setAttribute('target', newVal);
        }
        else if (name === 'rel') {
            this.wrapEl.setAttribute('rel', newVal);
        }
    }
    connectedCallback() {
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getMainEl(type, src) {
        return (type === 'text') ? createEl('i', { role: 'main' }, src || 'null') : createEl('img', { role: 'main', src: src || icons.image.avatar });
    }
    getRawData() {
        this.propsRaw = {
            type: this.getAttribute('type'),
            theme: this.getAttribute('theme'),
            size: this.getAttribute('size'),
            src: this.getAttribute('src') || this.textContent,
            shape: this.getAttribute('shape'),
            tips: this.getAttribute('tips'),
            badge: this.getAttribute('badge'),
            radius: this.getAttribute('radius'),
            href: this.getAttribute('href'),
            target: this.getAttribute('target'),
            rel: this.getAttribute('rel'),
            disabled: getAttrBool(this.getAttribute('disabled')),
        };
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k];
        }
    }
    render(data) {
        this.innerHTML = '';
        this.wrapEl = createEl('a', { role: 'wrap' });
        this.badgeEl = createEl('ax-badge', { role: 'badge' }, data?.badge?.trim());
        this.tipsEl = createEl('i', { role: 'tips' }, data.tips || '');
        this.mainEl = this.getMainEl(data.type, data.src);
        this.wrapEl.appendChild(this.mainEl);
        this.hasAttribute('badge') ? this.wrapEl.appendChild(this.badgeEl) : null;
        this.getAttribute('tips') ? this.wrapEl.appendChild(this.tipsEl) : null;
        this.appendChild(this.wrapEl);
    }
}
window.customElements.define("ax-avatar", AvatarElem);
export default AvatarElem;
