<script setup lang="ts">
interface DataItem {
  id: number;
  name: string;
}

import { ref, computed, onMounted } from 'vue'
import {
  Combobox,
  ComboboxInput,
  ComboboxButton,
  ComboboxOptions,
  ComboboxOption,
  TransitionRoot
} from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'

const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  data: {
    type: Array as () => DataItem[],
    default: []
  }
})
const emit = defineEmits(["update:selected"])

const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);

let selected = ref<DataItem[]>([data.value[0]])
let query = ref('')
let filteredData = computed(() =>
  query.value === ''
    ? data.value
    : data.value.filter((item: DataItem) =>
      item.name
        .toLowerCase()
        .replace(/\s+/g, '')
        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
    )
)

const show = ref(false)
 const removeJenis = (item: DataItem) => {
    selected.value = selected.value.filter((i) => i.id !== item.id)
  }
onMounted(() => {
})


</script>

<template>
  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
    <div class="relative mt-1">
      
      <div
        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
          @click="show = true" @blur="show = false" defaultValue="" />

        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
        </ComboboxButton>
      </div>
      <span class="flex flex-wrap gap-2">
        <span v-if="selected.length == 0" class="p-0.5">Empty</span>
        <span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
          <span>{{ item.name }}</span>
          <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </span>
      <TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
        leaveTo="opacity-0" @after-leave="query = ''">
        <ComboboxOptions static
          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
          <div v-if="filteredData.length === 0 && query !== ''"
            class="relative cursor-default select-none py-2 px-4 text-gray-700">
            Nothing found.
          </div>

          <ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
            v-slot="{ selected, active }">
            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
              'bg-teal-600 text-white': active,
              'text-gray-900': !active
            }">
              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
                {{ item.name }}
              </span>
              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
                :class="{ 'text-white': active, 'text-teal-600': !active }">
                <CheckIcon class="h-5 w-5" aria-hidden="true" />
              </span>
            </li>
          </ComboboxOption>
        </ComboboxOptions>
      </TransitionRoot>
    </div>
  </Combobox>
</template>
