/**  
 * @since Last modified: 2024/06/20 22:35:59
 * @class MenuElem
 * @description The custom element : ax-menu .
 * @augments CustomElem
 * @see {@link https://codepen.io/axui/pen/YzBeJNO|demo @ codepen}
 * @example
 * <ax-menu>Long article</ax-menu>;
 */

import createEl from '../utils/createEl';
import Menu from '../modules/Menu';
import optMenu from '../options/optMenu';
import CustomElem from './CustomElem';
import tplToEl from '../utils/tplToEl';

class MenuElem extends CustomElem {
    constructor() {
        super();
        
        this.createShadow();
        
        super.createObs();
    }

    
    static get observedAttributes() {
        
        return [...optMenu.map((k: any) => k.attr), 'options','class'];
    }
    
    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
        super.updateProxy(name, newVal, optMenu);
    }
    
    connectedCallback() {
        
        this.render();
    }
    
    disconnectedCallback() {}
    
    adoptedCallback() {}
    createShadow() {
        
        this.shadowEl = this.attachShadow({ mode: "open" });
        
        this.slotEl = createEl('slot');
        this.shadowEl.appendChild(this.slotEl);
    }
    render() {
        
        this.wrapEl = this.querySelector('ul') ? tplToEl(this.querySelector('ul')?.outerHTML as string) : createEl('ul');
        this.wrapEl.setAttribute('role', 'slot-host');
        this.innerHTML = '';
        this.appendChild(this.wrapEl);
        
        this.ins = new Menu(this.wrapEl);
    }
}
window.customElements.define("ax-menu", MenuElem);
export default MenuElem;
