import { h } from '../edel-elements.core.js';

class EdelMenuItemComponent {
    constructor() {
        this.active = false;
        this.class = 'menu-item';
    }
    onClick(event) {
        this.handleClick(event);
    }
    render() {
        return (h("a", null,
            h("slot", null)));
    }
    handleClick(event) {
        this.emit.emit(event);
    }
    componentDidLoad() {
        if (this.active) {
            this.hostElement.classList.add('menu-item--on');
        }
        else {
            this.hostElement.classList.remove('menu-item--on');
        }
    }
    didChange(nextClass, previousClass = '') {
        if (hasActiveClass(nextClass)) {
            this.active = true;
        }
        else if (hasActiveClass(previousClass)) {
            this.active = false;
        }
    }
    static get is() { return "edel-menu-item"; }
    static get properties() { return {
        "active": {
            "type": Boolean,
            "attr": "active",
            "reflectToAttr": true,
            "mutable": true,
            "watchCallbacks": ["componentDidLoad"]
        },
        "class": {
            "type": String,
            "attr": "class",
            "reflectToAttr": true,
            "mutable": true,
            "watchCallbacks": ["didChange"]
        },
        "hostElement": {
            "elementRef": true
        }
    }; }
    static get events() { return [{
            "name": "emit",
            "method": "emit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "click",
            "method": "onClick"
        }]; }
}
function hasActiveClass(allClasses) {
    if (allClasses == null)
        return false;
    const theme = 'active';
    if (typeof allClasses === 'string') {
        return allClasses.split(' ').indexOf(theme) !== -1;
    }
    else {
        return allClasses[theme] || false;
    }
}

export { EdelMenuItemComponent as EdelMenuItem };
