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 { MIcon } from '../../icon/icon';
import { MPlus } from '../../plus/plus';
import { MAccordionTransition } from '../../transitions/accordion-transition/accordion-transition';
import { BaseMenu } from '../menu';
import WithRender from './menu-item.html';
import './menu-item.scss';
var BaseMenuItem = /** @class */ (function (_super) {
    __extends(BaseMenuItem, _super);
    function BaseMenuItem() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BaseMenuItem;
}(ModulVue));
export { BaseMenuItem };
var MMenuItem = /** @class */ (function (_super) {
    __extends(MMenuItem, _super);
    function MMenuItem() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.group = false;
        _this.selected = false;
        _this.insideGroup = false;
        _this.animReady = false;
        _this.id = "mMenuItem-" + uuid.generate();
        _this.ariaControls = "mMenuItem-" + uuid.generate() + "-controls";
        // tslint:disable-next-line:no-null-keyword
        _this.menuRoot = null;
        // tslint:disable-next-line:no-null-keyword
        _this.groupItemRoot = null;
        _this.internalOpen = false;
        return _this;
    }
    MMenuItem_1 = MMenuItem;
    MMenuItem.prototype.mounted = function () {
        var _this = this;
        var menuRoot = this.getParent(function (p) { return p instanceof BaseMenu || p.$options.name === 'MMenu'; });
        if (menuRoot) {
            this.menuRoot = menuRoot;
        }
        else {
            console.error('<m-menu-item> need to be inside <m-menu>');
        }
        this.$nextTick(function () {
            _this.onGroupObserverChange();
            _this.groupObserver = new MutationObserver(function () { return _this.onGroupObserverChange(); });
            if (_this.$refs.group) {
                _this.groupObserver.observe(_this.$refs.group, { subtree: true, childList: true });
            }
        });
    };
    MMenuItem.prototype.beforeDestroy = function () {
        if (this.groupObserver) {
            this.groupObserver.disconnect();
        }
    };
    MMenuItem.prototype.emitClick = function (event) { };
    MMenuItem.prototype.openChanged = function (open) {
        this.propOpen = open;
    };
    Object.defineProperty(MMenuItem.prototype, "propOpen", {
        get: function () {
            return this.internalOpen;
        },
        set: function (open) {
            if (this.group) {
                this.animReady = false;
                this.internalOpen = open;
                this.animReady = true;
                this.$emit('update:open', open);
            }
        },
        enumerable: false,
        configurable: true
    });
    MMenuItem.prototype.getGroupItem = function () {
        return this.$refs.transition.$children
            .filter(function (child) { return child instanceof MMenuItem_1; })
            .map(function (child) { return child; });
    };
    Object.defineProperty(MMenuItem.prototype, "isAnimReady", {
        get: function () {
            return this.menuRoot ? this.menuRoot.animReady : false;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MMenuItem.prototype, "isUrl", {
        get: function () {
            return !!this.url && !this.group;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MMenuItem.prototype, "isDisabled", {
        get: function () {
            return this.menuRoot && this.menuRoot.propDisabled ? true : this.disabled;
        },
        enumerable: false,
        configurable: true
    });
    MMenuItem.prototype.onClick = function (event) {
        if (!this.isDisabled && this.menuRoot && !this.menuRoot.closeOnSelectionInAction) {
            if (this.group) {
                this.toggleOpen();
            }
            else {
                this.menuRoot.updateValue(this.value);
                this.menuRoot.onClick(event, this.value);
            }
            this.emitClick(event);
        }
    };
    MMenuItem.prototype.onGroupObserverChange = function () {
        this.group = !!this.$refs.transition.$children.find(function (item) { return item instanceof MMenuItem_1; });
    };
    MMenuItem.prototype.toggleOpen = function () {
        this.propOpen = !this.propOpen;
    };
    var MMenuItem_1;
    __decorate([
        Prop()
    ], MMenuItem.prototype, "open", void 0);
    __decorate([
        Prop()
    ], MMenuItem.prototype, "value", void 0);
    __decorate([
        Prop()
    ], MMenuItem.prototype, "label", void 0);
    __decorate([
        Prop()
    ], MMenuItem.prototype, "url", void 0);
    __decorate([
        Prop()
    ], MMenuItem.prototype, "iconName", void 0);
    __decorate([
        Prop()
    ], MMenuItem.prototype, "disabled", void 0);
    __decorate([
        Emit('click')
    ], MMenuItem.prototype, "emitClick", null);
    __decorate([
        Watch('open', { immediate: true })
    ], MMenuItem.prototype, "openChanged", null);
    MMenuItem = MMenuItem_1 = __decorate([
        WithRender,
        Component({
            components: {
                MIcon: MIcon,
                MPlus: MPlus,
                MAccordionTransition: MAccordionTransition
            }
        })
    ], MMenuItem);
    return MMenuItem;
}(BaseMenuItem));
export { MMenuItem };
//# sourceMappingURL=menu-item.js.map