<template>
  <button tabindex="-1"
    class="play-button pointer-events-none 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 { usePlatineStore } from '~/store/platine'
import type { Box, Track } from '~/../types/types'

const platineStore = usePlatineStore()
const props = defineProps<{ objectToPlay: Box | Track }>()

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

const isPlaying = computed(() => {
  return platineStore.isPlaying && isCurrentTrack.value
})

const isLoading = computed(() => {
  return platineStore.isLoadingTrack && isCurrentTrack.value
})
</script>

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