<template>
    <InputTemplate
        ref="inputTemplate"
        :label="label"
        :rules="rules"
        :placeholder="placeholder"
        :required="required"
        :hint="hint"
        :disabled="disabled"
        :small="small"
        :errorMessage="errorMessage"
        :validationHint="validationHint"
        :inputColor="inputColor"
        :labelWithoutColon="labelWithoutColon"
        :large="large"
        :value="inputValue"
        :withPrependContent="showPrependContent">
        <div
            @click="focusElement"
            @mouseenter="onMouseEnter"
            @mouseleave="onMouseLeave">
            <vSelect
                class="input__content"
                searchable
                :clearable="false"
                :options="options"
                ref="input"
                :filterable="false"
                @input="onChange"
                @search:focus="onFocus"
                @search:blur="onBlur"
                :value="inputValue"
                :noResult="noResult"
                @search="searchWithDebounce">
                <template #header>
                    <div class="input__prepend" v-if="showPrependContent">
                        <slot name="prepend">
                        </slot>
                    </div>
                </template>

                <template #option="option">
                    <div class="input__option__text">
                        <div class="input__option__icon">
                            <SearchOutlineIcon :iconColor="themeVariables.gray60" noHover/>
                        </div>
                        <div class="input__option">
                            {{ option.label }}
                        </div>
                    </div>
                </template>
                <template #no-options="{ search, searching, loading }">
                    <div class="input__noResult">
                        {{ noResult }}
                    </div>
                </template>
            </vSelect>
        </div>
    </InputTemplate>
</template>

<script lang="ts">
    import vSelect from 'vue-select';
    import _ from "lodash";
    // @ts-ignore
    import themeVariables from '../../../assets/scss/colors.scss';
    import InputTemplate from "../inputTemplate/InputTemplate.vue";
    import mixins from "vue-typed-mixins";
    import selectComponentMixin from "../mixins/selectComponentMixin";
    import {AutocompleteSearchResponseItem} from "./AutocompleteSearchResponseItem";
    import SearchOutlineIcon from "../../icons/formIcons/SearchOutlineIcon.vue";
    import inputMixin from "../mixins/inputMixin";

    export default mixins(inputMixin, selectComponentMixin).extend({
        name: "AutocompleteInput",
        mixins: [
            inputMixin,
            selectComponentMixin,
        ],
        extends: InputTemplate,
        props: {
            noResult: {
                type: String,
                // todo: default message?
                default: 'This is the no options slot.',
            },
            search: {
                type: Function,
                required: true,
            },
        },
        components: {
            vSelect,
            InputTemplate,
            SearchOutlineIcon,
        },
        data() {
            return {
                themeVariables: themeVariables,
                loading: false,
                options: [],
            };
        },
        computed: {
            inputValue(): any | null {
                // @ts-ignore
                return !_.isEmpty(this.value) ? this.value : null;
            },
        },
        methods: {
            // @ts-ignore
            searchWithDebounce: _.debounce(function (search: string): Promise<void> {
                if (search.length > 0) {
                    // @ts-ignore
                    this.search(search)
                        .then((response: AutocompleteSearchResponseItem[]) => {
                            // @ts-ignore
                            this.options = response;
                        })
                        .catch((e) => {
                            console.error(e);
                        });
                }
            }, 300),
        },
    });
</script>

<style scoped lang="scss">
    @import "../inputTemplate/inputTemplate";
    @import "autocompleteIcon";
</style>
