var _a;
import { __decorate, __extends, __spreadArrays } from "tslib";
import Component from 'vue-class-component';
import { Emit, Model, Prop, Watch } from 'vue-property-decorator';
import { InputLabel } from '../../mixins/input-label/input-label';
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 { FormatMode } from '../../utils/i18n/i18n';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { I18N_NAME, ICON_NAME, INPUT_STYLE_NAME, MULTI_SELECT_NAME, VALIDATION_MESSAGE_NAME } from '../component-names';
import { MI18n } from '../i18n/i18n';
import { MIcon } from '../icon/icon';
import { MInputStyle } from '../input-style/input-style';
import { MValidationMessage } from '../validation-message/validation-message';
import MChipDelete from './../chip/chip-delete/chip-delete';
import { MBaseSelect } from './../select/base-select/base-select';
import { MSelectItem } from './../select/select-item/select-item';
import WithRender from './multi-select.html?style=./multi-select.scss';
var MMultiSelect = /** @class */ (function (_super) {
    __extends(MMultiSelect, _super);
    function MMultiSelect() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.id = MULTI_SELECT_NAME + "-" + uuid.generate();
        _this.internalValue = [];
        _this.internalIsFocus = false;
        _this.selectAllFocused = false;
        _this.open = false;
        return _this;
    }
    MMultiSelect.prototype.created = function () {
        if (!Array.isArray(this.value)) {
            this.$log.error('MMultiSelect - The model must be an array');
        }
        if (!Array.isArray(this.options)) {
            this.$log.error('MMultiSelect - The options must be an array');
        }
    };
    MMultiSelect.prototype.mounted = function () {
        if (this.focus) {
            this.focusChanged(this.focus);
        }
    };
    Object.defineProperty(MMultiSelect.prototype, "model", {
        get: function () {
            return this.internalValue;
        },
        set: function (value) {
            this.internalValue = value;
            this.$emit('input', this.internalValue);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "selectedItems", {
        get: function () {
            if (this.value) {
                return this.value;
            }
            return [];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "numberOfItemsSelected", {
        get: function () {
            return this.selectedItems.length;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "isEmpty", {
        get: function () {
            return this.hasValue || (this.open) ? false : true;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "hasValue", {
        get: function () {
            return !!(this.model && this.model.length > 0);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "allSelected", {
        get: function () {
            return this.options.length > 0 && this.options.length === this.value.length;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "chipsDisplayMode", {
        get: function () {
            if (this.allSelected) {
                return 1;
            }
            else if (this.numberOfItemsSelected > this.maxVisibleChips) {
                return 0;
            }
            return -1;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "textNumberOfSelectedItems", {
        get: function () {
            return this.$i18n.translate('m-multi-select:all-selected', [this.numberOfItemsSelected], undefined, undefined, false, FormatMode.Default);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MMultiSelect.prototype, "textNumberOfUnselectedItemsLeft", {
        get: function () {
            return this.$i18n.translate('m-multi-select:more', [this.numberOfItemsSelected - this.maxVisibleChips], undefined, undefined, false, FormatMode.Default);
        },
        enumerable: true,
        configurable: true
    });
    MMultiSelect.prototype.toggle = function () {
        this.selectAllFocused = false;
        this.$refs.baseSelect.togglePopup();
    };
    MMultiSelect.prototype.onSelect = function (option, index, $event) {
        var positionInModel = this.model.indexOf(option);
        if (positionInModel === -1) {
            this.model = __spreadArrays(this.model, [(this.options[index])]);
        }
        else {
            this.onDelete(positionInModel);
        }
        this.$refs.baseSelect.update();
        if ($event.type === 'click') {
            this.$refs.baseSelect.focusedIndex = -1;
        }
    };
    MMultiSelect.prototype.onDelete = function (index) {
        this.model = this.model.slice(0, index).concat(this.model.slice(index + 1));
        this.$refs.baseSelect.update();
    };
    MMultiSelect.prototype.onDeleteAll = function () {
        this.model = [];
        this.$refs.baseSelect.update();
    };
    MMultiSelect.prototype.onFocus = function ($event) {
        this.internalIsFocus = this.as().active;
        if (this.internalIsFocus) {
            this.$emit('focus', $event);
        }
    };
    MMultiSelect.prototype.onBlur = function ($event) {
        this.internalIsFocus = false;
    };
    MMultiSelect.prototype.onKeydownDown = function ($event) {
        if (this.$refs.baseSelect.focusedIndex === this.options.length - 1 && this.linkSelectAll) {
            this.$refs.baseSelect.focusedIndex = -1;
            this.selectAllFocused = true;
        }
        else {
            this.selectAllFocused = false;
            this.$refs.baseSelect.focusNextItem();
        }
    };
    MMultiSelect.prototype.onKeydownUp = function ($event) {
        if (this.$refs.baseSelect.focusedIndex === 0 && this.linkSelectAll) {
            this.$refs.baseSelect.focusedIndex = -1;
            this.selectAllFocused = true;
        }
        else {
            this.selectAllFocused = false;
            this.$refs.baseSelect.focusPreviousItem();
        }
    };
    MMultiSelect.prototype.onKeydownEnter = function ($event) {
        if (this.$refs.baseSelect.focusedIndex > -1) {
            this.$refs.baseSelect.select(this.$refs.baseSelect.items[this.$refs.baseSelect.focusedIndex], this.$refs.baseSelect.focusedIndex, $event);
        }
        else if (this.selectAllFocused) {
            this.onToggleAll();
        }
    };
    MMultiSelect.prototype.onKeydownSpace = function ($event) {
        this.selectAllFocused = false;
        this.$refs.baseSelect.onKeydownSpace($event);
    };
    MMultiSelect.prototype.onToggleAll = function () {
        if (this.allSelected) {
            this.model = [];
        }
        else {
            this.model = __spreadArrays(this.options);
        }
    };
    MMultiSelect.prototype.getChipLabel = function (item) {
        var ellipsis = item.toString().length > this.defaultChipCharsTrunk ? '...' : '';
        return "" + item.toString().substring(0, this.defaultChipCharsTrunk) + ellipsis;
    };
    MMultiSelect.prototype.onValueChange = function (value) {
        this.internalValue = this.value;
    };
    MMultiSelect.prototype.focusChanged = function (focus) {
        this.internalIsFocus = focus && this.as().active;
        var inputEl = this.as().getInput();
        if (inputEl) {
            if (this.internalIsFocus) {
                inputEl.focus();
            }
            else {
                inputEl.blur();
            }
        }
    };
    __decorate([
        Model('input'),
        Prop({
            validator: function (value) { return Array.isArray(value); }
        })
    ], MMultiSelect.prototype, "value", void 0);
    __decorate([
        Prop({
            validator: function (value) { return Array.isArray(value); }
        })
    ], MMultiSelect.prototype, "options", void 0);
    __decorate([
        Prop()
    ], MMultiSelect.prototype, "focus", void 0);
    __decorate([
        Prop({
            default: false
        })
    ], MMultiSelect.prototype, "linkSelectAll", void 0);
    __decorate([
        Prop({
            default: 5
        })
    ], MMultiSelect.prototype, "maxVisibleChips", void 0);
    __decorate([
        Prop({
            default: 12
        })
    ], MMultiSelect.prototype, "defaultChipCharsTrunk", void 0);
    __decorate([
        Prop()
    ], MMultiSelect.prototype, "placeholder", void 0);
    __decorate([
        Emit('select-item')
    ], MMultiSelect.prototype, "onSelect", null);
    __decorate([
        Emit('blur')
    ], MMultiSelect.prototype, "onBlur", null);
    __decorate([
        Watch('value', { immediate: true })
    ], MMultiSelect.prototype, "onValueChange", null);
    __decorate([
        Watch('focus')
    ], MMultiSelect.prototype, "focusChanged", null);
    MMultiSelect = __decorate([
        WithRender,
        Component({
            components: (_a = {
                    MBaseSelect: MBaseSelect,
                    MSelectItem: MSelectItem,
                    MChipDelete: MChipDelete
                },
                _a[I18N_NAME] = MI18n,
                _a[VALIDATION_MESSAGE_NAME] = MValidationMessage,
                _a[ICON_NAME] = MIcon,
                _a[INPUT_STYLE_NAME] = MInputStyle,
                _a),
            mixins: [
                InputState,
                MediaQueries,
                InputWidth,
                InputLabel
            ]
        })
    ], MMultiSelect);
    return MMultiSelect;
}(ModulVue));
export { MMultiSelect };
var MultiSelectPlugin = {
    install: function (v, options) {
        v.component(MULTI_SELECT_NAME, MMultiSelect);
    }
};
export default MultiSelectPlugin;
//# sourceMappingURL=multi-select.js.map