<template>
  <div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
    <button @click="uiStore.closeBox" 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>
    <box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
      @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
      <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
      <template v-if="box.state === 'box-selected'">
        <deckCompilation :box="box" class="box-page" v-if="box.type === 'compilation'" @click.stop />
        <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
      </template>
    </box>
  </div>
</template>

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

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

function openBox(box: Box) {
  if (box.state !== 'box-selected') {
    uiStore.selectBox(box.id)
    // Scroll to the top smoothly
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
}

function playSelectedBox(box: Box) {
  playerStore.playBox(box)
}
</script>

<style lang="scss" scoped>
.boxes {
  @apply flex flex-col items-center justify-center text-center w-full;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 250px;
  transition: margin-top .5s ease;

  &.box-selected {
    margin-top: 0;

    .box {
      @apply w-full;
    }
  }

  .box {
    .play-button {
      @apply relative z-40 -bottom-1/2 opacity-0;
    }

    &.box-selected .play-button {
      @apply opacity-100 z-20;
      bottom: 20%;
      transition:
        bottom 0.7s ease,
        opacity 0.7s ease;
    }
  }
}
</style>
