<script lang="ts" setup>
import {computed, type PropType} from "vue";

const emit = defineEmits(['input', 'change', 'update:modelValue'])
const props = defineProps({
  label: {
    type: String,
    required: false,
    default: ''
  },
  modelValue: {
    type: [String, Number],
    required: false
  },
  items: {
    type: Array as PropType<SelectItem[]>,
    required: true
  },
  justify: {
    type: String as PropType<'start' | 'end'>,
    required: false,
    default: 'end'
  },
  disabled: {
    type: Boolean,
    required: false,
    default: false
  },
  align: {
    type: String as PropType<'bottom' | 'top'>,
    required: false,
    default: 'bottom'
  }
})

const selectWrapperRef = ref()
const selectRef = ref()
const optionsRef = ref()

const optionsAlign = computed(() => {
  switch (props.align) {
    case "bottom":
      return 'top-full mt-2'
    case "top":
      return 'bottom-full mb-2'
  }
})
const hasAnyIcon = computed(() => props.items.some(item => item.icon))
const selectedItem = computed(() => props.items.find(item => item.value === props.modelValue) as SelectItem)
const optionsExpanded = ref(false)
const selectedIconFlag = ref(true)

const handleSelectClick = () => {
  optionsExpanded.value = !optionsExpanded.value
}
const handleOptionSelect = (option: SelectItem) => {
  emit('input', option.value)
  emit('change', option.value)
  emit('update:modelValue', option.value)
  selectedIconFlag.value = false;
  nextTick(() => {
    selectedIconFlag.value = true;
  });
}

onMounted(() => {
  selectRef.value.ownerDocument.addEventListener('click', (e: { target: any; }) => {
    if (optionsExpanded && !selectRef?.value?.contains(e.target)) {
      optionsExpanded.value = false
    }
  })
})
</script>

<template>
  <div class="flex flex-col space-y-1"
    :class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
    <p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
      {{ label }}
    </p>
    <div class="relative" ref="selectWrapperRef">
      <button class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800
                   border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
                     focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-sm"
        :class="{ 'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }" ref="selectRef" type="button" @click="handleSelectClick" :disabled="disabled">
        <span v-if="selectedItem?.icon && !selectedIconFlag && hasAnyIcon"
          class="inline-block w-5 h-5 pointer-events-none"></span>
        <Icon v-else-if="selectedItem?.icon && selectedIconFlag && hasAnyIcon" :name="selectedItem?.icon"
          class="inline-block w-5 h-5 pointer-events-none" />
        <Transition name="select-item" mode="out-in">
          <span class="leading-snug whitespace-nowrap text-sm" :key="selectedItem?.value">{{
              selectedItem?.label || selectedItem?.value || 'Select an option'
            }}</span>
        </Transition>
        <Icon name="tabler:dots-vertical"
          class="absolute bg-neutral-50 text-gray-500 dark:bg-neutral-700/50 dark:text-neutral-500 inset-y-0 right-0 h-full" />
      </button>
      <div class="absolute right-0 w-full md:w-fit rounded-md border overflow-x-hidden overflow-y-auto transition shadow-lg opacity-0
                bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 z-50 max-h-64"
           :class="{ 'opacity-100 pointer-events-auto': optionsExpanded, '-translate-y-4 pointer-events-none': !optionsExpanded, [optionsAlign]: optionsAlign }"
        ref="optionsRef">
        <div class="flex items-center gap-2.5 px-2 py-2 cursor-pointer
                  dark:text-neutral-300 font-['Nunito'] transition whitespace-nowrap
                  bg-white dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700"
          v-for="(option, index) in items" :key="index" :class="{
            '!bg-neutral-200 dark:!bg-neutral-700 hover:!bg-neutral-200 dark:hover:!bg-neutral-700': option.value === selectedItem?.value,
            '!cursor-not-allowed text-neutral-300 dark:text-neutral-500 hover:bg-white dark:hover:!bg-neutral-800': option.disabled
          }" @click="!option.disabled ? handleOptionSelect(option) : void 0">
          <div class="inline-block w-5 h-5" v-if="hasAnyIcon && !option.icon"></div>
          <Icon :name="(option?.icon)" class="inline-block w-5 h-5" v-if="option.icon" />
          <span class="leading-none whitespace-nowrap text-sm font-sans">{{ option.label || 'No label' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.select-item-enter-active,
.select-item-leave-active {
  transition: all .15s ease;
}

.select-item-enter-from,
.select-item-leave-to {
  opacity: .5;
  filter: blur(2px);
}
</style>
