<template>
  <button
    class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
    :class="{ loading: isLoading }" :disabled="isLoading">
    <template v-if="isLoading">
      <img src="/loader.svg" alt="Chargement" class="size-16" />
    </template>
    <template v-else>
      {{ isPlaying ? 'I I' : '▶' }}
    </template>
  </button>
</template>

<script setup lang="ts">
import { usePlayerStore } from '~/store/player'
import type { Box, Track } from '~/../types/types'

const playerStore = usePlayerStore()
const props = defineProps<{ objectToPlay: Box | Track }>()

const isCurrentBox = computed(() => {
  if ('activeSide' in props.objectToPlay) {
    // Vérifier si la piste courante appartient à cette box
    if (playerStore.currentTrack?.boxId === props.objectToPlay.id) {
      // Si c'est une compilation, on vérifie le side actif
      if (props.objectToPlay.type === 'compilation') {
        return playerStore.currentTrack.side === props.objectToPlay.activeSide
      }
      return true
    }
    return false
  }
  return false
})

const isCurrentTrack = computed(() => {
  if (!('activeSide' in props.objectToPlay)) {
    return playerStore.currentTrack?.id === props.objectToPlay.id
  }
  return false
})

const isPlaying = computed(() => {
  return playerStore.isPlaying && (isCurrentTrack.value || isCurrentBox.value)
})

const isLoading = computed(() => {
  return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
})
</script>

<style>
.loading,
.play-button-changed {
  opacity: 1 !important;
}
</style>
