<script setup lang="ts">
const search = defineModel<string>('search');
const selectedItem = defineModel<unknown[]>('selectedItem', { default: [] });

const props = withDefaults(
  defineProps<{
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    items: any;
    color?: string;
    borderSearchSection?: boolean;
    itemClass?: string;
    noPadding?: boolean;
    noItemsIcon?: string;
    noItemsLabel?: string;
  }>(),
  {
    items: () => [],
    color: 'var(--brand-1)',
    noItemsIcon: 'mdi-close',
    itemClass: 'col-md-2 col-sm-6 col-12',
  },
);

defineExpose({ select });

function select(item?: unknown, all?: boolean) {
  if (all) {
    if (props.items.every((item) => selectedItem.value.includes(item))) {
      selectedItem.value = selectedItem.value.filter(
        (item) => !props.items.includes(item),
      );
    } else {
      props.items.forEach((i) => {
        const productExists = selectedItem.value.some((item) => item === i);
        if (!productExists) {
          selectedItem.value.push(i);
        }
      });
    }
  } else {
    if (selectedItem.value.includes(item)) {
      const index = selectedItem.value.indexOf(item);
      selectedItem.value.splice(index, 1);
    } else selectedItem.value.push(item);
  }
}
</script>
<template>
  <section class="full-width column">
    <header
      class="row items-center no-wrap q-px-md q-py-sm"
      :class="{ 'bordered surface-3 ': borderSearchSection }"
    >
      <div class="col"><slot name="top"></slot></div>
      <q-input
        for="input-search"
        outlined
        dense
        :label="$t('general.search')"
        class="q-ml-auto"
        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
        v-model="search"
        debounce="200"
      >
        <template #prepend>
          <q-icon name="mdi-magnify" />
        </template>
      </q-input>
    </header>
    <slot name="tab"></slot>

    <section class="col q-ma-md">
      <div v-if="items.length > 0" class="row q-col-gutter-md">
        <div v-for="(item, i) in items" :key="i" :class="`${itemClass}`">
          <div
            class="rounded cursor-pointer relative-position"
            :style="`border: 1px solid ${selectedItem.includes(item) ? color : 'transparent'}`"
            @click="() => select(item)"
          >
            <div
              v-if="selectedItem.includes(item)"
              class="badge absolute-top-right flex justify-center q-ma-sm"
              :style="`background-color: ${color}`"
            >
              {{ selectedItem.indexOf(item) + 1 }}
            </div>
            <slot name="data" :item="item"></slot>
          </div>
        </div>
      </div>
      <div v-else class="flex justify-center full-height">
        <span class="col column items-center justify-center app-text-muted">
          <q-avatar style="background: var(--surface-0)" class="q-mb-md">
            <q-icon :name="noItemsIcon" />
          </q-avatar>
          {{ noItemsLabel || $t('general.noData') }}
        </span>
      </div>
    </section>
  </section>
</template>
<style lang="scss" scoped>
.badge {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: var(--surface-1);
}
</style>
