/**  
 * @since Last modified: 2024/04/18 17:04:02
 * @class AnchorElem
 * @description The custom element : ax-anchor .
 * @see {@link https://codepen.io/axui/pen/RwOYmzW|demo @ codepen}
 * @example
 * <ax-anchor>256</ax-anchor>;
 */

import { T_fn, T_obj } from '../../../types/ax';
import ax from '../ax';
import config from '../global/config';
import prefix from '../global/prefix';
import Observe from '../modules/Observe';
import attrJoinVal from '../utils/attrJoinVal';
import attrValBool from '../utils/attrValBool';
import createEl from '../utils/createEl';
import elState from '../utils/elState';
import extend from '../utils/extend';
import getAttrBool from '../utils/getAttrBool';
import icons from '../utils/icons';
import tplToEl from '../utils/tplToEl';
import PlainElem from './PlainElem';

class AnchorElem extends PlainElem {
    wrapEl: any;
    labelEl: any;
    iconEl: any;
    tipsEl: any;
    valueEl: any;
    reset: any;
    increase: any;
    constructor() {
        super();
        
        this.createObserver();
        
        this.getRawData();
        
        this.render(this.propsProxy);
        
    }

    
    static get observedAttributes() {
        
        return ['class', 'icon', 'label', 'value', 'tips', 'done','disabled'];
    }
    
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        
        this.propsProxy[name] = (name === 'disabled') ? getAttrBool(newVal) : newVal;
        if (name === 'value') {
            this.valueEl.innerHTML = newVal;
        } else if (name === 'label') {
            this.labelEl.innerHTML = newVal;
        } else if (name === 'tips') {
            this.tipsEl.innerHTML = newVal;
        } else if (name === 'icon') {
            if (newVal === null) {
                this.iconEl.remove();
            } else {
                this.iconEl.setAttribute('class', newVal);
                if (elState(this.iconEl).isVirtual) {
                    this.wrapEl.insertAdjacentElement('afterBegin', this.iconEl);
                }
            }
        }else if(name === 'disabled' || name === 'done'){

        }
    }
    
    connectedCallback() {

    }
    
    disconnectedCallback() {
    }
    
    adoptedCallback() {
    }
    getRawData() {
        
        this.propsRaw = {
            icon: this.getAttribute('icon'),
            label: this.getAttribute('label'),
            value: this.getAttribute('value') || this.textContent,
            tips: this.getAttribute('tips'),
            disabled: getAttrBool(this.getAttribute('disabled')),
            done: getAttrBool(this.getAttribute('done')),
        }
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k]
        }
    }
    render(data: T_obj) {
        this.innerHTML = '';
        this.wrapEl = createEl('span', { role: 'wrap' });
        this.labelEl = createEl('i', { role: 'label' }, data.label || '');
        this.iconEl = createEl('i', { class: data.icon || '', role: 'icon' });
        this.valueEl = createEl('i', { role: 'value' }, data.value || '');
        this.tipsEl = createEl('i', { role: 'tips' }, data.tips || '');
        
        data.icon ? this.wrapEl.insertAdjacentElement('afterbegin', this.iconEl) : null;
        this.wrapEl.appendChild(this.valueEl);
        this.append(this.labelEl,this.wrapEl,this.tipsEl);
        
        !data.disabled && this.removeAttribute('disabled');
        !data.done && this.removeAttribute('done');
    }
}
window.customElements.define("ax-anchor", AnchorElem);
export default AnchorElem;
