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

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

interface Props {
  clearable?: boolean
  disabled?: boolean
  deletable?: boolean
  label: string
  selectedItems: Item[]
  btnClass?: string
}

// const items = defineModel<Item[]>('selectedItems', {required: true})

type Emits = {
  (e: 'delete', item: Item): void
}

const props = withDefaults(defineProps<Props>(), {
  clearable: true,
  disabled: false,
  label: 'select',
  deletable: false,
  btnClass: '',
})
const items = computed(() => {
  return props.selectedItems
})
const emits = defineEmits<Emits>()
const disabledStyles =
  'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
const isOpen = defineModel<boolean>('isOpen')

const minWidthOfChip = 100
const buttonElement = ref()
const buttonWidth = computed(() => buttonElement.value?.offsetWidth - 50)
const itemsCount = computed(() => {
  return items.value.length
})
const maxWidthOfChip = computed(() => {
  if (itemsCount.value) {
    const width = (itemsCount.value <= 5 ? buttonWidth.value - itemsCount.value*8 : buttonWidth.value) / itemsCount.value
    if (width < minWidthOfChip) {
      return minWidthOfChip
    }
    return width
  }
  return 'auto'
})

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 if (maxCountOfVisibleItems < 0) return 4
  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.length = 0
}
</script>
<template>
  <div>
    <button
      ref="buttonElement"
      class="hover:border-blue focus-visible:outline-blue
      relative flex w-full items-center justify-between gap-2 rounded-md
      border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
      focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
      dark:hover:border-blue-700"
      :class="twMerge(disabledStyles, props.btnClass)"
      :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"
            size="md"
            class="text-deepblue-900 dark:text-gray-200 border-gray-500"
            :style="{ 'max-width': maxWidthOfChip + 'px' }"
          >
            <span class="truncate">{{ item.name }}</span>
            <button
              v-if="deletable"
              class="rounded-full bg-deepblue-100 dark:bg-gray-200/10"
              @click.stop="deleteItem(item)"
            >
              <a-icon-x-mark class="size-3 dark:text-gray-300" />
            </button>
          </a-chips>
          <a-chips
            v-if="countOfUnvisibleItems"
            class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
            size="md"
          >
            + {{ countOfUnvisibleItems }}
          </a-chips>
        </div>
        <div v-else>
          {{ label }}
        </div>
      </div>
      <!--      <button-->
      <!--        v-if="visibleItems && countOfVisibleItems && clearable"-->
      <!--        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-chevron-down class="!m-0 text-base dark:text-gray-300"/>-->
      <!--      </button>-->
      <a-icon-chevron-down
        class="!m-0 min-w-4 transition-all text-deepblue-900 dark:text-gray-500"
        :class="{ '-rotate-90': !isOpen }"
      />
    </button>
  </div>
</template>
