<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 isPlaying = computed(() => {
  if (!playerStore.currentTrack) return false
  return (
    playerStore.isPlaying &&
    (playerStore.currentTrack?.boxId === props.objectToPlay.id ||
      playerStore.currentTrack?.id === props.objectToPlay.id)
  )
})

const isLoading = computed(() => {
  if (!playerStore.currentTrack || !playerStore.isLoading) return false
  return (
    playerStore.currentTrack.boxId === props.objectToPlay.id ||
    playerStore.currentTrack.id === props.objectToPlay.id
  )
})
</script>

<style>
.loading {
  opacity: 1 !important;
}
</style>
