import { defineStore } from "pinia";
import type { Card } from "~/types/Card";
import type { Collection } from "~/types/Collection";

export const useCardStore = defineStore("cardStore", {
  state: () => ({
    collections: [] as Collection[],
    cards: [] as Card[],
    smashList: [] as Card[],
    passList: [] as Card[],
  }),
  actions: {
    async fetchCollections() {
      const data = await $fetch<Collection[]>("/api/collections/", {
        baseURL: useApiBase(),
      });
      this.collections = data ?? [];
    },
    async fetchCardsByCollection(collectionName: string) {
      const data = await $fetch<Card[]>(
        `/api/cards/?collection__name=${collectionName}`,
        {
          baseURL: useApiBase(),
        },
      );

      this.cards =
        data.map((card, index) => ({
          ...card,
          id: index,
        })) ?? [];
      console.log(this.cards);
    },
    removeCard(id: number) {
      const index = this.cards.findIndex((card) => card.id === id);
      if (index !== -1) {
        this.cards.splice(index, 1);
      }
    },
  },
});