<template>
  <div class="card">
    <Carousel :value="decks" :numVisible="3" :numScroll="3">
      <template #item="slotProps">
        <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4 w-96 h-auto">
          <div class="mb-4">
            <div class="relative mx-auto">
              <img
                  :src="'https://upload.wikimedia.org/wikipedia/en/2/2b/Yugioh_Card_Back.jpg?20201122212343'"
                  class="w-full rounded"
                  alt="Deck"
              />
            </div>
          </div>
          <div class="flex justify-between ">
            <p class="font-bold">
              {{ slotProps.data.name }}
            </p>
            <Tag
                value="[ARCHETYPE]"
            />
          </div>
          <div class="flex justify- items-center">
            <SplitButton
                label="View"
                :model="deckMenuItems"
                @click="viewDeck(slotProps.data.id)"
            />
          </div>
        </div>
      </template>
    </Carousel>
  </div>
</template>

<script setup lang="ts">

import {type Deck, DeckService} from "../../api/openapi";
import {DeckServiceKey} from "../../main.ts";
import {inject, onMounted, ref, type Ref} from "vue";
import {useToast} from "primevue";
import {useRouter} from "vue-router";

const toast = useToast();
const router = useRouter();
const deckService: DeckService = inject(DeckServiceKey) as DeckService;
const decks: Ref<Deck[]> = ref([])

const deckMenuItems = [
  {
    label: 'Edit',
    command: () => {
      toast.add({
        severity: 'info',
        summary: 'Not Implemented',
        detail: 'Deck Editing isn\'t implemented yet',
        life: 3000
      });
    }
  },
]

const viewDeck = (deckId: number) => {
  router.push(`/decks/${deckId}`);
}

onMounted(async () => {
  const decksResponse = await deckService.getDecks()

  decks.value = decksResponse.data.content
})
</script>

<style scoped>

</style>