<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"
                ref="input"
                selectOnTab
                :searchable="searchable"
                :value="inputValue"
                @input="onChange"
                @search:focus="onFocus"
                @search:blur="onBlur"
                :options="options">
                <template #option="option">
                    <div class="input__option__text">
                        <div class="input__option">
                            {{ option.label }}
                        </div>
                        <div class="input__option__icon" v-if="optionIsSelected(option.label)">
                            <SuccessArrowIcon noHover :iconColor="themeVariables.primary"/>
                        </div>
                    </div>
                </template>
                <template #open-indicator="{ attributes }">
                    <div v-bind="attributes">
                        <div class="input__toggle">
                            <DropdownArrowDownIcon
                                :iconColor="disabled ? themeVariables.gray40 : themeVariables.gray1000"/>
                        </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 SuccessArrowIcon from "../../icons/formIcons/SuccessArrowIcon.vue";
    import DropdownArrowDownIcon from "../../icons/formIcons/DropdownArrowDownIcon.vue";
    import InputTemplate from "../inputTemplate/InputTemplate.vue";
    import mixins from "vue-typed-mixins";
    import selectComponentMixin from "../mixins/selectComponentMixin";
    import inputMixin from "../mixins/inputMixin";

    export default mixins(inputMixin, selectComponentMixin).extend({
        name: "SingleSelect",
        mixins: [
            inputMixin,
            selectComponentMixin,
        ],
        extends: InputTemplate,
        props: {
            clearable: {
                type: Boolean,
                default: false,
            },
            searchable: {
                type: Boolean,
                default: false,
            },
            options: {
                type: Array,
                required: true,
            },
            noResult: {
                type: String,
                // todo: default message?
                default: 'This is the no options slot.',
            },
        },
        components: {
            vSelect,
            SuccessArrowIcon,
            DropdownArrowDownIcon,
            InputTemplate,
        },
        data() {
            return {};
        },
        computed: {},
        methods: {},
    });
</script>

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