<template>
  <div class="player fixed left-0 z-50 w-full h-20"
    :class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'">
    <div class="flex items-center gap-3 p-2">
      <NuxtLink v-if="playerStore.currentTrack" :to="`/track/${playerStore.currentTrack.id}`">
        <img v-if="playerStore.getCurrentCoverUrl" :src="playerStore.getCurrentCoverUrl as string" alt="Current cover"
          class="size-16 object-cover object-center rounded">
      </NuxtLink>
      <audio ref="audioRef" class="flex-1" controls />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { usePlayerStore } from '~/store/player'

const playerStore = usePlayerStore()
const audioRef = ref<HTMLAudioElement | null>(null)

onMounted(() => {
  if (audioRef.value) {
    playerStore.attachAudio(audioRef.value)
    audioRef.value.addEventListener('timeupdate', playerStore.updateTime)
  }
})

onUnmounted(() => {
  if (audioRef.value) {
    audioRef.value.removeEventListener('timeupdate', playerStore.updateTime)
  }
})
</script>

<style>
.player {
  transition: all 1s ease-in-out;
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
