import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop, Ref } from 'vue-property-decorator';
import { MediaQueries } from '../../mixins/media-queries/media-queries';
import { MFocusTrap } from '../../mixins/window-focus-trap/window-focus-trap';
import { Enums } from '../../utils/enums/enums';
import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { OPTION_ITEM_ADD_NAME, OPTION_ITEM_ARCHIVE_NAME, OPTION_ITEM_DELETE_NAME, OPTION_ITEM_EDIT_NAME, OPTION_ITEM_NAME, OPTION_NAME, OPTION_SEPARATOR, OPTION_TITLE } from '../component-names';
import { MIconButton, MIconButtonSkin } from '../icon-button/icon-button';
import { MIcon } from '../icon/icon';
import { MPopperPlacement } from '../popper/popper';
import { MPopup } from '../popup/popup';
import { MOptionItem } from './option-item/option-item';
import { MOptionItemAdd } from './option-item/option-item-add';
import { MOptionItemArchive } from './option-item/option-item-archive';
import { MOptionItemDelete } from './option-item/option-item-delete';
import { MOptionItemEdit } from './option-item/option-item-edit';
import { MOptionSeparator } from './option-separator/option-separator';
import { MOptionTitle } from './option-title/option-title';
import WithRender from './option.html';
import './option.scss';
var BaseOption = /** @class */ (function (_super) {
    __extends(BaseOption, _super);
    function BaseOption() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BaseOption;
}(ModulVue));
export { BaseOption };
export var MOptionsSkin;
(function (MOptionsSkin) {
    MOptionsSkin["Light"] = "over-light";
    MOptionsSkin["Dark"] = "over-dark";
    MOptionsSkin["Mixed"] = "over-mixed";
})(MOptionsSkin || (MOptionsSkin = {}));
var MOption = /** @class */ (function (_super) {
    __extends(MOption, _super);
    function MOption() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.hasIcon = false;
        _this.isCloseButtonVisible = false;
        _this.id = "mOption-" + uuid.generate();
        _this.open = false;
        _this.isOutsideClickDetected = false;
        return _this;
    }
    MOption.prototype.emitOpen = function () {
        var _this = this;
        this.isOutsideClickDetected = false;
        this.lastItemFocus = document.activeElement;
        setTimeout(function () {
            if (_this.refMenu) {
                _this.as().setFocusTrap(_this.refMenu, { returnFocusOnDeactivate: false });
            }
        }, 0);
    };
    MOption.prototype.emitClose = function () {
        this.as().removeFocusTrap();
        if (this.lastItemFocus && (!this.isOutsideClickDetected || this.as().isMqMaxS)) {
            this.lastItemFocus.focus();
        }
    };
    MOption.prototype.emitClick = function (event) { };
    MOption.prototype.checkIcon = function (icon) {
        if (!icon) {
            return;
        }
        this.hasIcon = true;
    };
    MOption.prototype.close = function () {
        this.open = false;
        this.emitClose();
    };
    MOption.prototype.onCloseButtonFocus = function () {
        this.isCloseButtonVisible = true;
    };
    MOption.prototype.onCloseButtonBlur = function () {
        this.isCloseButtonVisible = false;
    };
    MOption.prototype.onClickOutside = function () {
        this.isOutsideClickDetected = true;
    };
    Object.defineProperty(MOption.prototype, "optionMaxWidth", {
        get: function () {
            return this.as().isMqMinM ? this.maxWidth : 'none';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "menuMaxHeight", {
        get: function () {
            return this.scroll ? undefined : 'none';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "isSkinMixed", {
        get: function () {
            return this.skin === MOptionsSkin.Mixed;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MOption.prototype, "iconButtonSkin", {
        get: function () {
            switch (this.skin) {
                case MOptionsSkin.Light:
                    return MIconButtonSkin.Light;
                case MOptionsSkin.Dark:
                    return MIconButtonSkin.Dark;
                default:
                    throw new Error('skin not supported!');
            }
        },
        enumerable: false,
        configurable: true
    });
    MOption.prototype.mounted = function () {
        document.addEventListener('keydown', this.closeOnEscape);
    };
    MOption.prototype.beforeDestroy = function () {
        document.removeEventListener('keydown', this.closeOnEscape);
        // if (!this.as<MFocusTrap>().focusTrap) { return; }
        // this.as<MFocusTrap>().focusTrap.deactivate();
    };
    MOption.prototype.closeOnEscape = function (event) {
        if (!(event.key === 'Escape' && this.open)) {
            return;
        }
        this.close();
        event.stopPropagation();
    };
    __decorate([
        Prop({
            default: MPopperPlacement.Bottom,
            validator: function (value) { return Enums.toValueArray(MPopperPlacement).includes(value); }
        })
    ], MOption.prototype, "placement", void 0);
    __decorate([
        Prop({
            default: MOptionsSkin.Light,
            validator: function (value) { return Enums.toValueArray(MOptionsSkin).includes(value); }
        })
    ], MOption.prototype, "skin", void 0);
    __decorate([
        Prop({ default: function () { return this.$i18n.translate('m-option:show-more'); } })
    ], MOption.prototype, "title", void 0);
    __decorate([
        Prop()
    ], MOption.prototype, "ariaLabel", void 0);
    __decorate([
        Prop()
    ], MOption.prototype, "disabled", void 0);
    __decorate([
        Prop({ default: '44px' })
    ], MOption.prototype, "size", void 0);
    __decorate([
        Prop({ default: true })
    ], MOption.prototype, "scroll", void 0);
    __decorate([
        Prop({ default: '260px' })
    ], MOption.prototype, "maxWidth", void 0);
    __decorate([
        Ref('menu')
    ], MOption.prototype, "refMenu", void 0);
    __decorate([
        Ref('popup')
    ], MOption.prototype, "refPopup", void 0);
    __decorate([
        Emit('open')
    ], MOption.prototype, "emitOpen", null);
    __decorate([
        Emit('close')
    ], MOption.prototype, "emitClose", null);
    __decorate([
        Emit('click')
    ], MOption.prototype, "emitClick", null);
    MOption = __decorate([
        WithRender,
        Component({
            components: {
                MPopup: MPopup,
                MIconButton: MIconButton,
                MIcon: MIcon
            },
            mixins: [
                MediaQueries,
                MFocusTrap
            ]
        })
    ], MOption);
    return MOption;
}(BaseOption));
export { MOption };
var OptionPlugin = {
    install: function (v, options) {
        v.use(MediaQueriesPlugin);
        v.component(OPTION_ITEM_NAME, MOptionItem);
        v.component(OPTION_ITEM_ARCHIVE_NAME, MOptionItemArchive);
        v.component(OPTION_ITEM_ADD_NAME, MOptionItemAdd);
        v.component(OPTION_ITEM_DELETE_NAME, MOptionItemDelete);
        v.component(OPTION_ITEM_EDIT_NAME, MOptionItemEdit);
        v.component(OPTION_TITLE, MOptionTitle);
        v.component(OPTION_SEPARATOR, MOptionSeparator);
        v.component(OPTION_NAME, MOption);
    }
};
export default OptionPlugin;
//# sourceMappingURL=option.js.map