<script setup>
import { defineProps, ref, computed, watch, nextTick, watchEffect } from "vue";
import { twMerge } from "tailwind-merge";
/* --------------------------------------------------------------
options: [
  {
    key: unique,
    content: "",
    selected: true / false,
    disabled: true / false
  }
]
---------------------------------------------------------------- */

const props = defineProps({
  options: Array,
  name: String,
  Attribute: String,
  onChange: Function,
  selectClass: String,
  value: Object,
  isTopLabelExist: {
    type: Boolean,
    default: true,
  },
  isBottomLabelExist: {
    type: Boolean,
    default: true,
  },
  required: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  search: {
    type: Boolean,
    default: false,
  },
});

const searchQuery = ref("");
const isOpen = ref(false);
const selectedOption = ref(null);

const filteredOptions = computed(() => {
  return props.options.filter((option) => {
    const content = option[props.Attribute] || option.key || "";
    return content.toLowerCase().includes(searchQuery.value.toLowerCase());
  });
});

const selectOption = (value) => {
  if (props.onChange) {
    props.onChange(value);
  } else {
    props.value[props.name] = value.key;
    selectedOption.value = props.options.find(
      (option) => option.key === value.key
    );
  }
  isOpen.value = false;
};

watchEffect(() => {
  isOpen.value = false;
  selectedOption.value = props.options.find(
    (option) => option.key == props.value[props.name]
  );
});
</script>

<template>
  <label class="form-control w-80 max-w-sm relative">
    <div :class="twMerge(isTopLabelExist ? 'label' : '')">
      <span class="label-text text-lg"><slot name="topLeft"></slot></span>
      <span class="label-text-alt"> <slot name="topRight"></slot></span>
    </div>

    <div
      :class="
        twMerge(
          'select  rounded-md text-lg cursor-pointer pt-2',
          disabled ? 'text-gray-300' : 'bg-transparent border-info'
        )
      "
      @click="disabled ? () => {} : (isOpen = !isOpen)"
    >
      {{ selectedOption ? selectedOption[Attribute] : "" }}
    </div>

    <div
      v-if="isOpen"
      class="absolute z-10 bg-gray-800 border border-info rounded-md w-full p-2"
    >
      <input
        v-model="searchQuery"
        type="text"
        placeholder="Search..."
        class="input input-bordered border-info rounded-md w-full mb-2 px-2"
      />

      <ul class="max-h-60 overflow-auto">
        <li
          v-for="option in filteredOptions"
          :key="option.key || option"
          @click="selectOption(option)"
          class="px-4 py-2 hover:bg-gray-600 cursor-pointer"
        >
          {{ option[Attribute] || option }}
        </li>
      </ul>
    </div>

    <div :class="twMerge(isBottomLabelExist ? 'label' : '')">
      <span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
      <span class="label-text-alt"> <slot name="bottomRight"></slot></span>
    </div>
  </label>
</template>

<style lang="scss" scoped></style>
