/**  
 * @since Last modified: 2024-09-17 00:27:52
 * @class AvatarElem
 * @description The custom element : ax-avatar .
 * @see {@link https://codepen.io/axui/pen/dyLmxBo|demo @ codepen}
 * @example
 * <ax-avatar>AV</ax-avatar>;
 */
import { T_el, T_obj } from '../../../types/ax';
import ax from '../ax';
import alias from '../global/alias';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import getAttrBool from '../utils/getAttrBool';
import icons from '../utils/icons';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';
class AvatarElem extends PlainElem {
    wrapEl: any;
    mainEl: any;
    badgeEl: any;
    tipsEl: any;
    contRaw: any;
    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: string, oldVal: string, newVal: string) {
        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: string, src: string) {
        return (type === 'text') ? createEl('i', { [alias]: 'main' }, src || 'null') : createEl('img', { [alias]: '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: T_obj) {
        this.innerHTML = '';
        this.wrapEl = createEl('a', { [alias]: 'wrap' });
        this.badgeEl = createEl('ax-badge', { [alias]: 'badge' }, data?.badge?.trim());
        this.tipsEl = createEl('i', { [alias]: '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;
