import { __assign, __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Model, Prop, Watch } from 'vue-property-decorator';
import { InputStateTagStyle } from '../../mixins/input-state/input-state';
import { InputMaxWidth } from '../../mixins/input-width/input-width';
import { Enums } from '../../utils/enums/enums';
import { ModulVue } from '../../utils/vue/vue';
import { AUTOCOMPLETE_NAME } from '../component-names';
import { MDropdown } from '../dropdown/dropdown';
import { MDropdownItem } from '../dropdown/dropdown-item/dropdown-item';
import WithRender from './autocomplete.html?style=./autocomplete.scss';
var MAutocomplete = /** @class */ (function (_super) {
    __extends(MAutocomplete, _super);
    function MAutocomplete() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.selection = '';
        _this.inputText = '';
        _this.items = [];
        _this.loading = false;
        _this.autocomplete = 'new-password';
        return _this;
    }
    MAutocomplete.prototype.created = function () {
        this.refreshItemsOnSelectionChange(this.model);
        this.selection = this.model;
    };
    MAutocomplete.prototype.onModelChange = function () {
        this.refreshItemsOnSelectionChange(this.model);
        this.selection = this.model;
    };
    MAutocomplete.prototype.onSelection = function () {
        this.refreshItemsOnSelectionChange(this.selection);
        if (this.selection === '') {
            this.inputText = this.selection;
        }
        return this.selection;
    };
    MAutocomplete.prototype.onResults = function () {
        this.items = this.results;
        this.loading = false;
    };
    MAutocomplete.prototype.onInputChangeThrottled = function (value) {
        var _this = this;
        clearTimeout(this.throttleTimeout);
        this.throttleTimeout = setTimeout(function () {
            _this.throttleTimeout = undefined;
            _this.onInputChange(value);
        }, this.throttle);
    };
    Object.defineProperty(MAutocomplete.prototype, "showNoResult", {
        get: function () {
            return !this.loading &&
                this.items.length === 0 &&
                this.inputText.length >= this.minimumChars;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MAutocomplete.prototype, "propTextNoMatch", {
        get: function () {
            return (this.textNoMatch ? this.textNoMatch : this.$i18n.translate('m-dropdown:no-result'));
        },
        enumerable: false,
        configurable: true
    });
    MAutocomplete.prototype.refreshItemsOnSelectionChange = function (value) {
        var label = '';
        var result = this.results.find(function (r) { return r.value === value; });
        if (result) {
            label = result.label;
        }
        this.items = value !== '' ? [__assign({ label: label, value: value }, result)] : [];
    };
    MAutocomplete.prototype.onInputChange = function (value) {
        this.inputText = value;
        if (value === '') {
            this.items = [];
        }
        else if (value.length >= this.minimumChars) {
            this.emitComplete(value);
            this.loading = true;
        }
    };
    MAutocomplete.prototype.emitComplete = function (value) {
        return value;
    };
    __decorate([
        Model('change')
    ], MAutocomplete.prototype, "model", void 0);
    __decorate([
        Prop({ default: function () { return []; } })
    ], MAutocomplete.prototype, "results", void 0);
    __decorate([
        Prop({ default: 250 })
    ], MAutocomplete.prototype, "throttle", void 0);
    __decorate([
        Prop({ default: 1 })
    ], MAutocomplete.prototype, "minimumChars", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "textNoMatch", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "maxLength", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "placeholder", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "focus", void 0);
    __decorate([
        Prop({ default: true })
    ], MAutocomplete.prototype, "clearInvalidSelectionOnClose", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "open", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "labelUp", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "disabled", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "errorMessage", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "validMessage", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "helperMessage", void 0);
    __decorate([
        Prop({ default: '100%' })
    ], MAutocomplete.prototype, "width", void 0);
    __decorate([
        Prop({ default: InputMaxWidth.Regular })
    ], MAutocomplete.prototype, "maxWidth", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "label", void 0);
    __decorate([
        Prop()
    ], MAutocomplete.prototype, "requiredMarker", void 0);
    __decorate([
        Prop({
            default: InputStateTagStyle.Default,
            validator: function (value) { return Enums.toValueArray(InputStateTagStyle).indexOf(value) !== -1; }
        })
    ], MAutocomplete.prototype, "tagStyle", void 0);
    __decorate([
        Watch('model')
    ], MAutocomplete.prototype, "onModelChange", null);
    __decorate([
        Emit('change'),
        Watch('selection')
    ], MAutocomplete.prototype, "onSelection", null);
    __decorate([
        Watch('results')
    ], MAutocomplete.prototype, "onResults", null);
    __decorate([
        Emit('complete')
    ], MAutocomplete.prototype, "emitComplete", null);
    MAutocomplete = __decorate([
        WithRender,
        Component({
            components: {
                MDropdown: MDropdown,
                MDropdownItem: MDropdownItem
            }
        })
    ], MAutocomplete);
    return MAutocomplete;
}(ModulVue));
export { MAutocomplete };
var AutoCompletePlugin = {
    install: function (v, options) {
        v.prototype.$log.debug(AUTOCOMPLETE_NAME, 'plugin.install');
        v.component(AUTOCOMPLETE_NAME, MAutocomplete);
    }
};
export default AutoCompletePlugin;
//# sourceMappingURL=autocomplete.js.map