/**  
 * @since Last modified: 2024-09-17 00:28:21
 * @class DeformElem
 * @description The custom element : ax-deform .
 * @see {@link https://codepen.io/axui/pen/zYXwpaW|demo @ codepen}
 * @example
 * <ax-deform type="menu"></ax-deform>;
 */
import { T_obj } from '../../../types/ax';
import ax from '../ax';
import config from '../global/config';
import getAttrBool from '../utils/getAttrBool';
import PlainElem from './PlainElem';
class DeformElem extends PlainElem {
    constructor() {
        super();
        super.createObs();
         this.getRawData();
        this.render(this.propsProxy);
        this.reset = ()=>{
            this.setAttribute('type',this.propsRaw.type);
        }
    }
    static get observedAttributes() {
        return ['class', 'type', 'theme', 'shape', 'size', 'disabled', 'bordered', 'filled', 'dark'];
    }
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        if (name === 'class') {
            let has = newVal.includes(config.actClass),
                type = this.propsRaw.type; console.log(newVal,config.actClass,type)
            if (has) {
                if (type === 'left') {
                    this.setAttribute('type', 'right');
                } else if (type === 'right') {
                    this.setAttribute('type', 'left');
                } else if (type === 'up') {
                    this.setAttribute('type', 'down');
                } else if (type === 'down') {
                    this.setAttribute('type', 'up');
                } else {
                    this.setAttribute('type', 'close');
                }
            } else {
                this.setAttribute('type', this.propsRaw.type)
            }
        } else {
            this.propsProxy[name] = ['disabled', 'bordered', 'filled', 'dark'].includes(name) ? getAttrBool(newVal) : newVal;
        }
    }
    connectedCallback() {
    }
    disconnectedCallback() {
    }
    adoptedCallback() {
    }
    getRawData() {
        this.propsRaw = {
            type: this.getAttribute('type'),
            theme: this.getAttribute('theme'),
            shape: this.getAttribute('shape'),
            size: this.getAttribute('size'),
            filled: getAttrBool(this.getAttribute('filled')),
            disabled: getAttrBool(this.getAttribute('disabled')),
            bordered: getAttrBool(this.getAttribute('bordered')),
            dark: getAttrBool(this.getAttribute('dark')),
        }
        for (let k in this.propsRaw) {
            this.propsProxy[k] = this.propsRaw[k]
        }
    }
    render(data: T_obj) {
        this.innerHTML = '<i></i>'.repeat(3);
    }
}
window.customElements.define("ax-deform", DeformElem);
export default DeformElem;
