<script setup lang="ts">
import AChips from '~/components/elements/chips/AChips.vue'
import {isEqual} from "lodash-es";

type Item = {
  id: number | string
  name: string
}

interface Props {
  multiple?: boolean
  clearable?: boolean
  disabled?: boolean
  label: string
}

const items = defineModel<Item[]>('selectedItems')
type Emits = {
  (e: 'delete', item: Item): void
}


const props = withDefaults(defineProps<Props>(), {
  clearable: true,
  disabled: false,
  label: 'select'
})
const emits = defineEmits<Emits>()
const disabledStyles =
  'disabled:pointer-events-none disabled:bg-deepblue-50 disabled:text-deepblue-200'
const isOpen = defineModel<boolean>('isOpen')


const buttonElement = ref()
const countOfVisibleItems = computed(() => {
  if (!items.value?.length) return undefined
  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
  if (maxCountOfVisibleItems > items.value.length) return items.value.length
  else return maxCountOfVisibleItems
})
const visibleItems = computed(() => {
  if (!items.value.length && !countOfVisibleItems) return undefined
  return items.value.slice(0, countOfVisibleItems.value)
})
const countOfUnvisibleItems = computed(() => {
  if (!items.value?.length && !countOfVisibleItems.value) return undefined
  return items.value.length - countOfVisibleItems.value
})
const deleteItem = (item: Item) => {
  emits('delete', item)
  items.value = items.value?.filter(el => !isEqual(el, item))
}
const onClear = () => {
  items.value = []
}


</script>

<template>
  <div>
    <!--    <pre>{{ items }} items</pre>-->
    <button
      ref="buttonElement"
      class="hover:border-blue focus-visible:outline-blue relative flex justify-between w-full items-center gap-2 rounded-md border border-solid border-deepblue-50 bg-deepblue-50 px-4 py-1.5 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-900 dark:hover:border-blue-700 dark:bg-[#E3E5E80D]"
      :class="[disabledStyles]"
      :disabled="disabled"
      @click="isOpen = !isOpen"
    >
      <div>
        <div
          v-if="visibleItems && visibleItems.length"
          class="flex gap-2"
        >
          <a-chips
            v-for="item in visibleItems"
            :key="item.id"
            class="max-w-[100px]"
            @click.stop="deleteItem( item)"
          >
            {{ item.name }}
            <button class="rounded-full bg-deepblue-100 dark:bg-gray-200/10">
              <a-icon-x-mark class="size-3 dark:text-gray-300" />
            </button>
          </a-chips>
          <a-chips v-if="countOfUnvisibleItems">
            + {{ countOfUnvisibleItems }}
          </a-chips>
        </div>
        <div v-else>
          {{ label }}
        </div>
      </div>
      <button
        v-if="visibleItems && countOfVisibleItems"
        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"
        @click.stop="onClear"
      >
        <a-icon-x-mark class="!m-0 text-base dark:text-gray-300" />
      </button>
      <a-icon-chevron-up
        class="!m-0 transition-all "
        :class="{'rotate-180': isOpen}"
        style="color: #9da3ac"
      />
    </button>
  </div>
</template>

<style scoped>

</style>
