var _a;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { ACCORDION_TRANSITION_NAME, MENU_ITEM_NAME, MENU_NAME, PLUS_NAME } from '../component-names';
import { MPlus } from '../plus/plus';
import { MAccordionTransition } from '../transitions/accordion-transition/accordion-transition';
import { MMenuItem } from './menu-item/menu-item';
import WithRender from './menu.html';
import './menu.scss';
var BaseMenu = /** @class */ (function (_super) {
    __extends(BaseMenu, _super);
    function BaseMenu() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BaseMenu;
}(ModulVue));
export { BaseMenu };
export var MMenuSkin;
(function (MMenuSkin) {
    MMenuSkin["Light"] = "light";
    MMenuSkin["Dark"] = "dark";
})(MMenuSkin || (MMenuSkin = {}));
var MMenu = /** @class */ (function (_super) {
    __extends(MMenu, _super);
    function MMenu() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.animReady = false;
        _this.closeOnSelectionInAction = false;
        _this.titleMenuOpen = _this.$i18n.translate('m-menu:open');
        _this.titleMenuClose = _this.$i18n.translate('m-menu:close');
        _this.internalValue = '';
        _this.internalOpen = false;
        _this.internalDisabled = false;
        _this.internalItems = [];
        return _this;
    }
    MMenu.prototype.onClick = function (event, value) { };
    MMenu.prototype.beforeEnter = function (event, value) { };
    MMenu.prototype.enter = function (event, value) { };
    MMenu.prototype.afterEnter = function (event, value) { };
    MMenu.prototype.enterCancelled = function (event, value) { };
    MMenu.prototype.beforeLeave = function (event, value) { };
    MMenu.prototype.leave = function (event, value) { };
    MMenu.prototype.afterLeave = function (event, value) { };
    MMenu.prototype.leaveCancelled = function (event, value) { };
    MMenu.prototype.updateValue = function (value) {
        this.model = value;
    };
    MMenu.prototype.onOpenChanged = function (open) {
        this.internalOpen = open;
    };
    MMenu.prototype.onDisabledChanged = function (disabled) {
        this.propDisabled = disabled;
    };
    MMenu.prototype.mounted = function () {
        var _this = this;
        this.$nextTick(function () {
            _this.buildItemsMap();
            _this.menuObserver = new MutationObserver(function () { return _this.buildItemsMap(); });
            if (_this.$refs.menu) {
                _this.menuObserver.observe(_this.$refs.menu, { subtree: true, childList: true });
            }
        });
    };
    MMenu.prototype.beforeDestroy = function () {
        if (this.menuObserver) {
            this.menuObserver.disconnect();
        }
    };
    Object.defineProperty(MMenu.prototype, "propDisabled", {
        get: function () {
            return this.internalDisabled;
        },
        set: function (disabled) {
            this.internalDisabled = disabled;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MMenu.prototype, "propOpen", {
        get: function () {
            return this.internalOpen;
        },
        set: function (open) {
            this.animReady = false;
            this.selectedItem();
            this.internalOpen = open;
            this.$emit('update:open', open);
            this.animReady = true;
        },
        enumerable: false,
        configurable: true
    });
    MMenu.prototype.toggleMenu = function (event) {
        if (!this.propDisabled) {
            this.propOpen = !this.propOpen;
            this.$refs.buttonMenu.blur();
            this.onClick(event, '');
        }
    };
    Object.defineProperty(MMenu.prototype, "model", {
        get: function () {
            return this.internalValue;
        },
        set: function (value) {
            var _this = this;
            if (!this.closeOnSelectionInAction) {
                this.internalValue = value;
                this.selectedItem();
                this.$emit('update:selected', value);
                if (this.closeOnSelection) {
                    this.closeOnSelectionInAction = true;
                    // Add a delay before closing the menu to display the selected item
                    setTimeout(function () {
                        _this.propOpen = false;
                        _this.closeOnSelectionInAction = false;
                    }, 600);
                }
            }
        },
        enumerable: false,
        configurable: true
    });
    MMenu.prototype.buildItemsMap = function () {
        var items = [];
        this.$refs.transition.$children.forEach(function (item) {
            if (item instanceof MMenuItem) {
                items.push(item);
                if (item.group) {
                    item.getGroupItem().forEach(function (groupItem) {
                        groupItem.insideGroup = true;
                        items.push(groupItem);
                    });
                }
            }
        });
        this.internalItems = items;
    };
    MMenu.prototype.selectedItem = function () {
        var _this = this;
        if (this.internalItems) {
            this.internalItems.forEach(function (item) {
                if (!item.isDisabled) {
                    if (item.value === _this.model) {
                        item.selected = true;
                    }
                    else if (item.selected) {
                        item.selected = false;
                    }
                }
            });
            this.internalItems.forEach(function (item) {
                item.propOpen = false;
                if (!item.isDisabled && item.group) {
                    item.$children.forEach(function (itemGroup) {
                        itemGroup.$children.forEach(function (subItem) {
                            if (subItem.isUrl) {
                                subItem.selected = _this.isRouterLinkActive(subItem);
                            }
                            if (subItem.selected) {
                                item.propOpen = true;
                                item.selected = true;
                            }
                        });
                    });
                }
            });
        }
    };
    MMenu.prototype.isRouterLinkActive = function (menuItem) {
        return !!menuItem.$el.querySelector('.router-link-exact-active');
    };
    __decorate([
        Prop()
    ], MMenu.prototype, "selected", void 0);
    __decorate([
        Prop()
    ], MMenu.prototype, "open", void 0);
    __decorate([
        Prop({ default: true })
    ], MMenu.prototype, "closeOnSelection", void 0);
    __decorate([
        Prop({
            default: MMenuSkin.Dark,
            validator: function (value) {
                return value === MMenuSkin.Light ||
                    value === MMenuSkin.Dark;
            }
        })
    ], MMenu.prototype, "skin", void 0);
    __decorate([
        Prop()
    ], MMenu.prototype, "disabled", void 0);
    __decorate([
        Prop({ default: "mMenu-" + uuid.generate() + "-controls" })
    ], MMenu.prototype, "idAriaControls", void 0);
    __decorate([
        Emit('click')
    ], MMenu.prototype, "onClick", null);
    __decorate([
        Emit('before-enter')
    ], MMenu.prototype, "beforeEnter", null);
    __decorate([
        Emit('enter')
    ], MMenu.prototype, "enter", null);
    __decorate([
        Emit('after-enter')
    ], MMenu.prototype, "afterEnter", null);
    __decorate([
        Emit('enter-cancelled')
    ], MMenu.prototype, "enterCancelled", null);
    __decorate([
        Emit('before-leave')
    ], MMenu.prototype, "beforeLeave", null);
    __decorate([
        Emit('leave')
    ], MMenu.prototype, "leave", null);
    __decorate([
        Emit('after-leave')
    ], MMenu.prototype, "afterLeave", null);
    __decorate([
        Emit('leave-cancelled')
    ], MMenu.prototype, "leaveCancelled", null);
    __decorate([
        Watch('selected', { immediate: true })
    ], MMenu.prototype, "updateValue", null);
    __decorate([
        Watch('open', { immediate: true })
    ], MMenu.prototype, "onOpenChanged", null);
    __decorate([
        Watch('disabled', { immediate: true })
    ], MMenu.prototype, "onDisabledChanged", null);
    MMenu = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[PLUS_NAME] = MPlus,
                _a[ACCORDION_TRANSITION_NAME] = MAccordionTransition,
                _a)
        })
    ], MMenu);
    return MMenu;
}(BaseMenu));
export { MMenu };
var MenuPlugin = {
    install: function (v, options) {
        v.component(MENU_ITEM_NAME, MMenuItem);
        v.component(MENU_NAME, MMenu);
    }
};
export default MenuPlugin;
//# sourceMappingURL=menu.js.map