<template>
  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
      aria-label="close the box">
      close
    </button>
    <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
      :is-face-up="isCardRevealed(track.id)" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useDataStore } from '~/store/data'
import { useCardStore } from '~/store/card'
import { usePlayerStore } from '~/store/player'
import { useUiStore } from '~/store/ui'
import type { Box } from '~~/types/types'

const props = defineProps<{
  box: Box
}>()

const cardStore = useCardStore()
const dataStore = useDataStore()
const playerStore = usePlayerStore()
const uiStore = useUiStore()

const deck = ref()
const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))

const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)

const closeDatBox = () => {
  uiStore.closeBox()
}
</script>
