<template>
    <div class="">
        <label
            :for="name"
            v-if="label"
            class="block mb-1 font-semibold text-xs text-gray-300 peer-required:after:content-['*']"
            >{{ label }}</label
        >
        <Listbox v-model="_selected" :name="name" class="flex flex-1">
            <div class="relative flex-1 mt-1">
                <ListboxButton
                    class="flex-1 peer min-h-[40px] disabled:cursor-not-allowed px-2.5 bg-white !cursor-pointer gap-0.5 flex items-center w-full border-2 border-blue-200 rounded-lg mb-1 overflow-hidden focus-within:border-blue-300 transition-colors duration-300 ease-in-out"
                >
                    <span
                        class="block truncate"
                        :class="_selected ? ' text-gray-300' : 'text-gray-200'"
                        >{{ _selected ? _selected[nameBy] : placeholder }}</span
                    >
                    <span
                        class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
                    >
                        <svg
                            class="icon icon-tabler icon-tabler-chevron-down"
                            fill="none"
                            height="20"
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                            viewBox="0 0 24 24"
                            width="20"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path d="M0 0h24v24H0z" fill="none" stroke="none" />
                            <polyline points="6 9 12 15 18 9" />
                        </svg>
                    </span>
                </ListboxButton>

                <transition
                    leave-active-class="transition duration-100 ease-in"
                    leave-from-class="opacity-100"
                    leave-to-class="opacity-0"
                >
                    <ListboxOptions
                        class="absolute z-50 w-full py-1 overflow-auto text-base bg-white rounded-md shadow-lg top-full mt-full max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                    >
                        <ListboxOption
                            v-for="option in _options"
                            :key="option.id"
                            v-slot="{ active, selected }"
                            :value="option"
                            as="template"
                        >
                            <li
                                :class="[
                                    active
                                        ? 'bg-blue-100 text-blue-300'
                                        : 'text-gray-300',
                                    'relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-blue-100 hover:text-blue-300 transition-all duration-200',
                                ]"
                            >
                                <span
                                    :class="[
                                        selected
                                            ? 'font-medium'
                                            : 'font-normal',
                                        'block truncate',
                                    ]"
                                    >{{ option[nameBy] }}</span
                                >
                                <span
                                    v-if="selected"
                                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
                                >
                                    <CheckIcon
                                        aria-hidden="true"
                                        class="w-5 h-5"
                                    />
                                </span>
                            </li>
                        </ListboxOption>
                    </ListboxOptions>
                </transition>
            </div>
        </Listbox>
        <FormKit
            :classes="{ inner: 'hidden' }"
            v-model="value"
            :options="_optionsValidation"
            name="multiselect_validation_{{ id }}"
            :validation="required ? validation + '|required' : validation"
            type="select"
            validation-label="select"
        />
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import {
    Listbox,
    ListboxButton,
    ListboxOption,
    ListboxOptions,
} from "@headlessui/vue";
import { CheckIcon } from "@heroicons/vue/solid";
const emit = defineEmits(["update:value"]);
const props = defineProps({
    options: {
        type: Array,
        default: () => [],
    },
    value: {
        type: String,
        default: () => null,
    },
    name: {
        type: String,
        default: () => "dropdown",
    },
    nameBy: {
        type: String,
        default: () => "name",
    },
    placeholder: {
        type: String,
        default: () => "Please select a value from below",
    },
    label: {
        type: String,
        default: () => null,
    },
    required: { type: Boolean, default: false },
    validation: {
        type: String,
        default: "",
    },
});

const getSelected = () => {
    return props.options.find((option) => option.id === props.value) || null;
};

const _options = ref(props.options);

const _optionsValidation = ref(
    props.options.map((option) => {
        return {
            id: option.id,
            name: option[props.nameBy],
            value: option.id,
        };
    })
);

const _selected = ref(getSelected());

onMounted(() => {}),
    watch(
        _selected,
        (current, prev) => {
            emit("update:value", current.id);
        },
        { deep: true }
    );
</script>
