<template>
  <div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
    <box v-for="(box, i) in dataStore.boxes" :key="box.id" :tabindex="dataStore.boxes.length - i"
      :box="getBoxToDisplay(box)" @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
      <template v-if="box.state === 'box-selected'">
        <template v-if="box.type === 'compilation'">
          <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
          <deckCompilation :box="getBoxToDisplay(box)" class="box-page" :key="`${box.id}-${box.activeSide}`"
            @click.stop="" />
        </template>
        <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop="" />
      </template>
    </box>
    <nav class="fixed top-0">
      <a class="button m-4 bg-esyellow" href="/draggable">Draggable</a>
      <a class="button m-4 bg-esyellow" href="/mix">Mix</a>
    </nav>
  </div>
</template>

<script lang="ts" setup>
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()

// Retourne la box avec les propriétés du côté sélectionné si c'est une compilation
function getBoxToDisplay(box: Box) {
  if (box.type !== 'compilation' || !('sides' in box)) return box

  const side = box.sides?.[box.activeSide]
  if (!side) return box

  return {
    ...box,
    ...side
  }
}

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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  transition: margin-top 0.5s ease;
  min-height: 100vh;

  &.box-selected {
    justify-content: flex-start;

    .box {
      width: 100%;
    }
  }

  .box {
    .play-button {
      position: relative;
      z-index: 40;
      bottom: -50%;
      opacity: 0;
    }

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