<template @keydown.esc="closePlayer()">
  <div class="bg-black text-white w-full flex items-center flex-col">
    <button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50" @click="closePlayer()">
    </button>

    <video class="mixPlayer w-full" controls ref="mixPlayer">
      <source :src="videoSD" type="video/mp4">
    </video>
    <nav class="text-esyellow w-full flex">
      <button v-for="(track, index) in tracks" @click="listenTo(track.start)"
        class="border-l-wihte-400 border-l-2 flex-grow hover:bg-esyellow hover:text-black"
        :class="{ 'border-l-0': index === 0 }">
        <span class="block">
          {{ index + 1 }}
        </span>
        <span class="hidden 2xl:block">
              {{ track.title }}
            </span>
            <span class="hidden lg:block">
              {{ store.getArtistById(track.artist).name }}
            </span>
      </button>
    </nav>

    <article class="text-white p-8 max-w-5xl" v-if="currentTrack">
      <div class="flex items-center">
        <div class="mr-4">
          <img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentTrack.cover + '_8.jpg'" />
        </div>
        <div>
          <h3 class="text-5xl">
            {{ currentTrack.title }}
          </h3>
          <h2 class="font-bold text-6xl text-esyellow">
            {{ store.getArtistById(currentTrack.artist).name }}
          </h2>
          <h4 class="text-xl text-slate-200">
            {{ compilation.name }}
          </h4>
        </div>
      </div>

      <p class="block mt-10">
        see artist page:<br>
        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="store.getArtistById(currentTrack.artist).url">
          {{ store.getArtistById(currentTrack.artist).name }}
        </a><br>
        purchase the track:<br>
        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentTrack.url">
          {{ currentTrack.title }}
        </a><br>
        <br>
      </p>
    </article>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const store = useDataStore()

const compilation = ref()
const tracks = ref()
const mixPlayer = ref()
const videoSD = ref()
const currentTrack = ref()

const currentArtist = computed(()=>{
  currentTrack
})

const { isLoaded } = storeToRefs(store)

onMounted(() => {
  loadCompilation()
})

watch(isLoaded, () => {
  loadCompilation()
})

const watchPlayingTrack = () => {
  setInterval(() => {
    if (mixPlayer.value && compilation.value.id) {
      currentTrack.value = tracks.value.find((track: { start: number; }, index: number) => {
        const nextTrackStart = tracks.value[index + 1]?.start ?? Infinity
        return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
      })
    }
  }, 1000)
}

const loadCompilation = () => {
  if(isLoaded.value) {
    compilation.value = store.getCompilationById(route.params.id)
    tracks.value = store.getTracksByCompilationId(route.params.id)
    videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-HD.mp4'
    mixPlayer.value.load()
    mixPlayer.value.play()
    mixPlayer.value.focus()
    watchPlayingTrack()
  }
}

const listenTo = (start) => {
  mixPlayer.value.currentTime = start
  mixPlayer.value.play()
}

const closePlayer = async () => {
  await navigateTo('/')
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
}

.logo {
  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
}

.mixPlayer {
  background: black;
  max-height: 70vh;
}

nav > button:first-child {
  border-left: none;
}

.button--close {
  position: fixed;
  right: 2vw;
  &:after {
    content: "\00d7";
  }
}
.button {
  text-decoration: none;
  box-shadow: 0 8px 0 0 black;
  transition: all .3s;
  border: 8px black solid;
  line-height: 100%;
  border-width: 2px;
  border-radius: 100px;
  cursor: pointer;
  color: black;
  background-color: #ffffff59;
}
</style>
