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

const props = withDefaults(
  defineProps<{
    items: unknown[];
    color?: string;
  }>(),
  {
    items: () => [],
    color: 'var(--brand-1)',
  },
);

function select(item: unknown) {
  if (selectedItem.value.includes(item)) {
    let index = selectedItem.value.indexOf(item);
    selectedItem.value.splice(index, 1);
  } else selectedItem.value.push(item);
}
</script>
<template>
  <section class="full-width column q-pa-md">
    <header class="row items-center no-wrap q-mb-md">
      <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>

    <section class="col">
      <div class="row q-col-gutter-md">
        <div
          v-for="(item, i) in items"
          :key="i"
          class="col-md-2 col-sm-6 col-12"
        >
          <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>
    </section>
  </section>
</template>
<style lang="scss" scoped>
.badge {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: var(--surface-1);
}
</style>
