<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
                multiple
                :class="['input__content', {'withContent': inputValue.length > 0}]"
                clearable
                :searchable="searchable"
                ref="input"
                selectOnTab
                v-model="inputValue"
                @input="onChange"
                @search:focus="onFocus"
                @search:blur="onBlur"
                @option:selecting="selectOption($event)"
                :components="{Deselect}"
                :close-on-select="false"
                :options="options">
                <template #option="option">
                    <div class="input__option__text">
                        <div class="input__option">
                            {{ option.label }}
                        </div>
                        <template v-if="small">
                            <div class="input__option__icon" v-if="optionIsSelected(option.label)">
                                <SuccessArrowIcon noHover :iconColor="inputColor"/>
                            </div>
                        </template>
                        <template v-else>
                            <div class="input__option__icon">
                                <CheckboxComponent :color="inputColor" :value="optionIsSelected(option.label)"/>
                            </div>
                        </template>
                    </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 _ from "lodash";
    import SuccessArrowIcon from "../../icons/formIcons/SuccessArrowIcon.vue";
    import DropdownArrowDownIcon from "../../icons/formIcons/DropdownArrowDownIcon.vue";
    import ErrorIcon from "../../icons/formIcons/ErrorIcon.vue";
    import UncheckedIcon from "../../icons/checkbox/UncheckedIcon.vue";
    import CheckedIcon from "../../icons/checkbox/CheckedIcon.vue";
    import InputTemplate from "../inputTemplate/InputTemplate.vue";
    // @ts-ignore
    import mixins from "vue-typed-mixins";
    import selectComponentMixin from "../mixins/selectComponentMixin";
    import inputMixin from "../mixins/inputMixin";
    import CheckboxComponent from '../../../components/forms/checkboxComponent/CheckboxComponent.vue';

    export default mixins(inputMixin, selectComponentMixin).extend({
        name: "MultipleSelect",
        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.',
            },
            value: {
                type: Array,
                required: true,
            },
        },
        components: {
            vSelect,
            SuccessArrowIcon,
            DropdownArrowDownIcon,
            InputTemplate,
            ErrorIcon,
            UncheckedIcon,
            CheckedIcon,
            CheckboxComponent,
        },
        data() {
            return {
                Deselect: ErrorIcon,
            };
        },
        computed: {
            inputValue: {
                get(): any {
                    return this.value;
                },
                set(value: []): void {
                    this.$emit('input', value);
                },
            },
        },
        methods: {
            onChange(value: []): void {
                this.$emit('input', value);
            },
            selectOption(option: string): void {
                if (this.optionIsSelected(option)) {
                    let newArray = _.clone(this.inputValue);

                    _.remove(newArray, (o: string) => {
                        return o === option;
                    });

                    this.inputValue = newArray;
                }
            },
        },
    });
</script>

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