<template>
    <div class="w-full mb-1">
        <label
            :for="id"
            v-if="label"
            class="block mb-1 font-semibold text-xs text-gray-300 peer-required:after:content-['*']"
            >{{ label }}</label
        >
        <Multiselect
            :id="id"
            v-model="value"
            :options="_options"
            searchable
            :trackBy="trackBy"
            :label="labelBy"
            :multiple="multiple"
            :name="name || id"
            :mode="multiple ? 'tags' : 'single'"
            :disabled="disabled"
            :placeholder="placeholder"
        />
        <FormKit
            v-if="_optionsValidation.length > 0 && enableValidation"
            v-model="_value"
            :classes="{ inner: 'hidden', outer: '!mb-0' }"
            :options="_optionsValidation"
            :name="`multiselect_validation_${id}`"
            :id="`multiselect_validation_${id}`"
            :validation="required ? validation + '|required' : validation"
            type="select"
            :multiple="multiple"
            validation-label="select"
        />
    </div>
</template>

<script>
import Multiselect from "@vueform/multiselect";

export default {
    components: {
        Multiselect,
    },
    props: {
        value: {
            type: Array,
            default: () => null,
        },
        options: {
            type: Array,
            default: () => [],
        },
        trackBy: {
            type: String,
            default: "name_en",
        },
        labelBy: {
            type: String,
            default: "name_en",
        },
        nameByAr: {
            type: String,
            default: "name_ar",
        },
        nameByEn: {
            type: String,
            default: "name_en",
        },
        id: {
            type: String,
            default: "vue_multiselect_" + Math.random(),
        },
        name: {
            type: String,
            default: "vue_multiselect_" + Math.random(),
        },
        label: {
            type: String,
            default: null,
        },
        validation: {
            type: String,
            default: "",
        },
        required: {
            type: Boolean,
            default: false,
        },
        multiple: {
            type: Boolean,
            default: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: "",
        },
    },
    watch: {
        value(value) {
            this.$emit("update:value", value);
        },
    },

    data() {
        return {
            enableValidation: false,
            _value: null,
            _optionsValidation: [],
        };
    },
    computed: {
        _options() {
            const options = [];
            this.options.forEach((option) => {
                options.push({
                    value: option.id,
                    label: option[this.labelBy],
                    name_en: option[this.nameByEn],
                    name_ar: option[this.nameByar],
                });
            });
            return options;
        },
        // _optionsValidation() {
        //     const options = [];
        //     this.options.forEach((option) => {
        //         options.push({
        //             value: option.id,
        //             label: option[this.labelBy],
        //             name_en: option[this.nameByEn],
        //             name_ar: option[this.nameByar],
        //         });
        //     });
        //     return options;
        // },
    },
    mounted() {
        setTimeout(() => {
            this._value = this.value;
            this.enableValidation = true;
            const options = [];
            this.options.forEach((option) => {
                options.push({
                    value: option.id,
                    label: option[this.labelBy],
                    name_en: option[this.nameByEn],
                    name_ar: option[this.nameByar],
                });
            });
            this._optionsValidation = options;
        }, 10);
    },
    updated() {
        setTimeout(() => {
            this.enableValidation = true;
            const options = [];
            this.options.forEach((option) => {
                options.push({
                    value: option.id,
                    label: option[this.labelBy],
                    name_en: option[this.nameByEn],
                    name_ar: option[this.nameByar],
                });
            });
            this._optionsValidation = options;
        }, 10);
    },
    watch: {
        value(value) {
            this._value = value;
            this.$emit("update:value", value);
        },
    },
};
</script>

<style src="@vueform/multiselect/themes/default.css"></style>
