var _a, _b;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Model, Prop, Watch } from 'vue-property-decorator';
import { I18N_NAME as FILTER_I18N_NAME } from '../../filters/filter-names';
import { i18nFilter } from '../../filters/i18n/i18n';
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 uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { ICON_BUTTON_NAME, TEXTFIELD_NAME, TYPEAHEAD_NAME, VALIDATION_MESSAGE_NAME } from '../component-names';
import { MIconButton } from '../icon-button/icon-button';
import { MBaseSelect } from '../select/base-select/base-select';
import { MTextfield } from '../textfield/textfield';
import { MValidationMessage } from '../validation-message/validation-message';
import WithRender from './typeahead.html?style=./typeahead.scss';
var MTypeahead = /** @class */ (function (_super) {
    __extends(MTypeahead, _super);
    function MTypeahead() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.id = TYPEAHEAD_NAME + "-" + uuid.generate();
        _this.isResultsPopupOpen = false;
        _this.textfieldValue = '';
        _this.filteredResults = [];
        _this.ariaControls = _this.id + '-controls';
        _this.throttleTimeoutActive = false;
        return _this;
    }
    MTypeahead.prototype.emitInput = function (event) { };
    MTypeahead.prototype.emitFilterResults = function () { };
    MTypeahead.prototype.onValueChange = function (newValue) {
        this.textfieldValue = newValue;
    };
    MTypeahead.prototype.onResultsChange = function () {
        this.onFilterResults();
    };
    MTypeahead.prototype.onFocusChanged = function (newValue) {
        if (newValue) {
            this.openResultsPopup();
            this.onFilterResults();
        }
    };
    MTypeahead.prototype.onBaseSelectOpen = function (newValue) {
        var _this = this;
        if (newValue && this.as().isMqMaxS) {
            setTimeout(function () {
                _this.$refs.researchInput.focus();
            });
        }
    };
    Object.defineProperty(MTypeahead.prototype, "hasResults", {
        get: function () {
            return this.results && this.results.length > 0;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MTypeahead.prototype, "hasFilteredResults", {
        get: function () {
            return this.filteredResults && this.filteredResults.length > 0;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MTypeahead.prototype, "hasTextfieldValue", {
        get: function () {
            return this.textfieldValue.length > 0;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MTypeahead.prototype, "resultsCouldBeDisplay", {
        get: function () {
            return this.hasFilteredResults && this.hasTextfieldValue && this.as().active;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MTypeahead.prototype, "hasSomeAResultSelected", {
        get: function () {
            var _this = this;
            return this.filteredResults.some(function (e, index) { return _this.isSelected(index); });
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MTypeahead.prototype, "sortedResult", {
        get: function () {
            return this.results.sort();
        },
        enumerable: true,
        configurable: true
    });
    MTypeahead.prototype.openResultsPopup = function () {
        if (this.isResultsPopupOpen) {
            return;
        }
        this.isResultsPopupOpen = true;
    };
    MTypeahead.prototype.closeResultsPopup = function () {
        this.isResultsPopupOpen = false;
    };
    MTypeahead.prototype.onSelect = function (option, index) {
        this.textfieldValue = this.filteredResults[index];
        this.emitInput(this.textfieldValue);
    };
    MTypeahead.prototype.isSelected = function (index) {
        return this.isResultsPopupOpen && this.textfieldValue.indexOf(this.filteredResults[index]) > -1;
    };
    MTypeahead.prototype.focusOnResearchInput = function () {
        this.$refs.researchInput.focus();
    };
    MTypeahead.prototype.onFilterResults = function () {
        var _this = this;
        if (this.filterResultsManually) {
            this.filteredResults = this.results.slice(0, this.maxResults);
        }
        else {
            this.filteredResults = this.sortedResult
                .filter(function (r) {
                return _this.hasTextfieldValue
                    &&
                        r.toLowerCase().includes(_this.textfieldValue.toLowerCase());
            }).slice(0, this.maxResults);
        }
    };
    MTypeahead.prototype.getTextHighlight = function (item) {
        var regex = RegExp(this.textfieldValue, 'i');
        return item.replace(regex, '<b>$&</b>');
    };
    MTypeahead.prototype.onInput = function (event) {
        var _this = this;
        this.textfieldValue = event;
        this.emitInput(event);
        window.clearTimeout(this.throttleTimeout);
        this.throttleTimeoutActive = true;
        this.throttleTimeout = window.setTimeout(function () {
            _this.throttleTimeoutActive = false;
            _this.onFilterResults();
            if (_this.resultsCouldBeDisplay) {
                _this.$refs.mBaseSelect.setFocusedIndex(0);
            }
            if (!_this.isResultsPopupOpen) {
                _this.openResultsPopup();
            }
            _this.emitFilterResults();
        }, this.throttle);
    };
    MTypeahead.prototype.onKeydownEnter = function ($event) {
        if (this.resultsCouldBeDisplay && this.as().isMqMinS) {
            this.$refs.mBaseSelect.selectFocusedItem($event);
        }
        this.$refs.mBaseSelect.closePopup();
    };
    MTypeahead.prototype.onKeydownDown = function ($event) {
        if (this.resultsCouldBeDisplay) {
            this.$refs.mBaseSelect.onKeydownDown($event);
        }
    };
    MTypeahead.prototype.onKeydownUp = function ($event) {
        if (this.resultsCouldBeDisplay) {
            this.$refs.mBaseSelect.onKeydownUp($event);
        }
    };
    MTypeahead.prototype.onKeydownTab = function ($event) {
        if (this.resultsCouldBeDisplay) {
            this.$refs.mBaseSelect.onKeydownTab($event);
        }
    };
    MTypeahead.prototype.onKeydownEsc = function ($event) {
        if (this.resultsCouldBeDisplay) {
            this.$refs.mBaseSelect.onKeydownEsc($event);
        }
    };
    __decorate([
        Model('input'),
        Prop({
            required: true
        })
    ], MTypeahead.prototype, "value", void 0);
    __decorate([
        Prop()
    ], MTypeahead.prototype, "results", void 0);
    __decorate([
        Prop()
    ], MTypeahead.prototype, "waitingResults", void 0);
    __decorate([
        Prop()
    ], MTypeahead.prototype, "filterResultsManually", void 0);
    __decorate([
        Prop({ default: 200 })
    ], MTypeahead.prototype, "throttle", void 0);
    __decorate([
        Prop({ default: 0 })
    ], MTypeahead.prototype, "maxLength", void 0);
    __decorate([
        Prop({ default: true })
    ], MTypeahead.prototype, "lengthOverflow", void 0);
    __decorate([
        Prop()
    ], MTypeahead.prototype, "characterCount", void 0);
    __decorate([
        Prop({ default: 0 })
    ], MTypeahead.prototype, "characterCountThreshold", void 0);
    __decorate([
        Prop({ default: 20 })
    ], MTypeahead.prototype, "maxResults", void 0);
    __decorate([
        Emit('input')
    ], MTypeahead.prototype, "emitInput", null);
    __decorate([
        Emit('filter-results')
    ], MTypeahead.prototype, "emitFilterResults", null);
    __decorate([
        Watch('value', { immediate: true })
    ], MTypeahead.prototype, "onValueChange", null);
    __decorate([
        Watch('results', { immediate: true })
    ], MTypeahead.prototype, "onResultsChange", null);
    __decorate([
        Watch('internalIsFocus')
    ], MTypeahead.prototype, "onFocusChanged", null);
    __decorate([
        Watch('isResultsPopupOpen')
    ], MTypeahead.prototype, "onBaseSelectOpen", null);
    MTypeahead = __decorate([
        WithRender,
        Component({
            components: (_a = {
                    MBaseSelect: MBaseSelect
                },
                _a[TEXTFIELD_NAME] = MTextfield,
                _a[VALIDATION_MESSAGE_NAME] = MValidationMessage,
                _a[ICON_BUTTON_NAME] = MIconButton,
                _a),
            filters: (_b = {},
                _b[FILTER_I18N_NAME] = i18nFilter,
                _b),
            mixins: [
                InputLabel,
                InputState,
                InputWidth,
                MediaQueries,
                InputManagement
            ]
        })
    ], MTypeahead);
    return MTypeahead;
}(ModulVue));
export { MTypeahead };
var TypeaheadPlugin = {
    install: function (v, options) {
        v.component(TYPEAHEAD_NAME, MTypeahead);
    }
};
export default TypeaheadPlugin;
//# sourceMappingURL=typeahead.js.map