import { __awaiter, __decorate, __extends, __generator } from "tslib";
import Component from 'vue-class-component';
import { Emit, Model, Prop, Ref } from 'vue-property-decorator';
import { InputLabel } from '../../mixins/input-label/input-label';
import { InputManagement } from '../../mixins/input-management/input-management';
import { InputState } from '../../mixins/input-state/input-state';
import { InputWidth } from '../../mixins/input-width/input-width';
import { MediaQueries } from '../../mixins/media-queries/media-queries';
import { REGEX_CSS_NUMBER_VALUE } from '../../utils/props-validation/props-validation';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { SELECT_NAME } from '../component-names';
import { MIconButton } from '../icon-button/icon-button';
import { MIcon } from '../icon/icon';
import { MInputStyle } from '../input-style/input-style';
import { MOpacityTransition } from '../transitions/opacity-transition/opacity-transition';
import { MValidationMessage } from '../validation-message/validation-message';
import { MBaseSelect } from './base-select/base-select';
import WithRender from './select.html?style=./select.scss';
var MSelect = /** @class */ (function (_super) {
    __extends(MSelect, _super);
    function MSelect() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.open = false;
        return _this;
    }
    MSelect.prototype.onOpen = function () {
        return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
            return [2 /*return*/];
        }); });
    };
    MSelect.prototype.onClose = function () { };
    MSelect.prototype.emitSelectItem = function (option, index, event) {
        this.$emit('select-item', option, index, event);
    };
    Object.defineProperty(MSelect.prototype, "hasItems", {
        get: function () {
            return this.options && this.options.length > 0;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSelect.prototype, "isEmpty", {
        get: function () {
            return !this.as().hasValue && !this.open && !Boolean(this.as().placeholder);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSelect.prototype, "isClearable", {
        get: function () {
            return this.clearable !== undefined ?
                this.clearable
                    && this.hasItems
                    && this.as().hasValue
                    && this.isSelectable
                : this.hasItems
                    && this.as().hasValue
                    && this.isSelectable
                    && !this.as().requiredMarker;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSelect.prototype, "selectedItems", {
        get: function () {
            if (this.value) {
                return [this.value];
            }
            return [];
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSelect.prototype, "isSelectable", {
        get: function () {
            return !this.as().isDisabled &&
                !this.as().isReadonly;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSelect.prototype, "optionsAreStringArray", {
        get: function () {
            if (this.options.length === 0) {
                return false;
            }
            return typeof this.options[0] === 'string';
        },
        enumerable: false,
        configurable: true
    });
    MSelect.prototype.onInputStyleClick = function (callbackToggle) {
        callbackToggle();
        if (!this.open) {
            return;
        }
        this.focusInput();
    };
    MSelect.prototype.focusInput = function () {
        if (this.refInput && document.activeElement !== this.refInput) {
            this.refInput.focus();
        }
    };
    MSelect.prototype.onPortalAfterClose = function () {
        this.focusInput();
    };
    MSelect.prototype.onSelect = function (option, index, $event) {
        this.emitSelectItem(option, index, $event);
        this.as().model = this.refBaseSelect.focusValue;
    };
    MSelect.prototype.onReset = function () {
        var _a;
        this.as().model = '';
        (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
    };
    MSelect.prototype.onKeyDownDelete = function (event) {
        if (event.key === 'Delete' && this.isClearable) {
            this.onReset();
        }
    };
    __decorate([
        Model('input'),
        Prop()
    ], MSelect.prototype, "value", void 0);
    __decorate([
        Prop()
    ], MSelect.prototype, "options", void 0);
    __decorate([
        Prop()
    ], MSelect.prototype, "clearable", void 0);
    __decorate([
        Prop({ default: false })
    ], MSelect.prototype, "virtualScroll", void 0);
    __decorate([
        Prop()
    ], MSelect.prototype, "listMinWidth", void 0);
    __decorate([
        Prop({
            validator: function (value) {
                return REGEX_CSS_NUMBER_VALUE.test(value);
            }
        })
    ], MSelect.prototype, "listMaxHeight", void 0);
    __decorate([
        Prop({ default: uuid.generate() })
    ], MSelect.prototype, "inputAriaDescribedby", void 0);
    __decorate([
        Prop({
            default: function () { return SELECT_NAME + "-" + uuid.generate(); }
        })
    ], MSelect.prototype, "id", void 0);
    __decorate([
        Ref('input')
    ], MSelect.prototype, "refInput", void 0);
    __decorate([
        Ref('baseSelect')
    ], MSelect.prototype, "refBaseSelect", void 0);
    __decorate([
        Emit('open')
    ], MSelect.prototype, "onOpen", null);
    __decorate([
        Emit('close')
    ], MSelect.prototype, "onClose", null);
    MSelect = __decorate([
        WithRender,
        Component({
            components: {
                MBaseSelect: MBaseSelect,
                MOpacityTransition: MOpacityTransition,
                MInputStyle: MInputStyle,
                MIcon: MIcon,
                MValidationMessage: MValidationMessage,
                MIconButton: MIconButton
            },
            mixins: [
                InputState,
                MediaQueries,
                InputManagement,
                InputWidth,
                InputLabel
            ]
        })
    ], MSelect);
    return MSelect;
}(ModulVue));
export { MSelect };
var SelectPlugin = {
    install: function (v, options) {
        v.component(SELECT_NAME, MSelect);
    }
};
export default SelectPlugin;
//# sourceMappingURL=select.js.map