<template>
  <div>
    <div class="w-full flex justify-center">
      <nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50 bg-black">
        <a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
          <img src="/youtube.svg" alt="ho no" />
        </a>
        <a href="mailto:contact@evilspins.com">📬</a>
        <a href="/about">❓</a>
      </nav>
    </div>
    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer()">
      <figure class="ui">
        <img class="logo" src="/logo.svg">
        <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
          ↓
        </button>
      </figure>
      <div class="shadow screen" />
      <video class="animation screen" loop autoplay muted ref="animation">
        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
          media="all and (max-width: 640px)">
      </video>
      <div class="mix hide bg-black w-full screen overflow-scroll">
        <button class="button button--close m-4 flex justify-center items-center z-50" @click="closePlayer()">
          <svg width="20px" height="30px">
            <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
            <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
          </svg>
        </button>
        <video class="mixPlayer w-full" controls ref="mixPlayer">
          <source :src="mixPlayerSourceHD" type="video/mp4">
          <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
        </video>
        <article class="text-white p-8">
          <h3 class="text-5xl">
            {{ currentTitle }}
          </h3>
          <h2 class="font-bold text-6xl text-esyellow">
            {{ currentArtist.name }}
          </h2>
          <h4 class="text-xl text-slate-200">
            {{ currentCompilationName }}
          </h4>

          <p class="block mt-10">
            see artist page:<br>
            <a target="_blank" class="underline text-slate-400" :href="currentLink">
              {{ currentArtist.url }}
            </a><br>
            purchace the track:<br>
            <a target="_blank" class="underline text-slate-400" :href="currentLink">
              {{ currentLink }}
            </a><br>
            <br>
          </p>
        </article>
        <section class=" bg-black">
          <zero-a @click="play('ES00A')" class="w-40">
            <button class="button absolute object-center p-4 flex justify-center items-center">
              <svg width="40px" height="30px">
                <polygon points="0,0 0,30 30,15" />
              </svg>
            </button>
          </zero-a>
          <zero-b @click="play('ES00B')" class="w-40"></zero-b>
        </section>
      </div>
    </section>
    <section class="flex bg-black">
      <zero-a @click="play('ES00A')">
        <button class="button absolute object-center p-4 flex justify-center items-center">
          <svg width="40px" height="30px">
            <polygon points="0,0 0,30 30,15" />
          </svg>
        </button>
      </zero-a>
      <zero-b @click="play('ES00B')"></zero-b>
    </section>
  </div>
</template>
<script setup lang="ts">
// SEO
useSeoMeta({
  title: 'evilSpins, compilations indépendantes',
  ogTitle: 'evilSpins, compilations indépendantes',
  description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
  ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
  ogImage: 'https://evilspins.com/logo.svg'
})


// animate player
const mixPlayer = ref()
const mixPlayerSourceHD = ref('')
const mixPlayerSourceSD = ref('')

const currentCompilationId = ref('')
const currentCompilationName = ref('')
const currentArtist = ref('')
const currentTitle = ref('')
const currentLink = ref('')


const play = (id: string) => {
  document.body.style.overflow = 'hidden' // Block scrolling
  currentCompilationId.value = id
  mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/' + currentCompilationId.value + '-HD.mp4'
  mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/' + currentCompilationId.value + '-SD.mp4'

  fadeOut(document.querySelector('.button'))
  fadeOut(document.querySelector('.logo'))
  fadeOut(document.querySelector('.animation'))
  fadeIn(document.querySelector('.mix'))
  fadeOut(document.querySelector('.shadow'))
  mixPlayer.value.load()
  mixPlayer.value.play()
  mixPlayer.value.focus()
}

const closePlayer = () => {
  fadeIn(document.querySelector('.animation'))
  fadeIn(document.querySelector('.button'))
  fadeIn(document.querySelector('.logo'))
  fadeOut(document.querySelector('.mix'))
  fadeIn(document.querySelector('.shadow'))
  mixPlayer.value.pause()
  document.body.style.overflow = '' // Reset scroll when closing
}

const fadeOut = (elt: HTMLElement) => {
  elt.classList.add('hide')
}
const fadeIn = (elt: HTMLElement) => {
  elt.classList.remove('hide')
}

const scrollDown = function () {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
}

// load data
const { data: tracksData } = await useFetch('/api/tracks')
const { data: artistsData } = await useFetch('/api/artists')
const { data: stylesData } = await useFetch('/api/styles')
const { data: compilationsData } = await useFetch('/api/compilations')

onMounted(() => {
  setInterval(() => {
    if (mixPlayer.value && currentCompilationId.value) {
      // console.log(mixPlayer.value.currentTime)
      const compilations = JSON.parse(JSON.stringify(compilationsData.value))
      const tracks = JSON.parse(JSON.stringify(tracksData.value))
      const artists = JSON.parse(JSON.stringify(artistsData.value))
      compilations.map((compilation) => {
        if (compilation.id === currentCompilationId.value) {
          currentCompilationName.value = compilations.find(compilation => compilation.id === currentCompilationId.value).name
          const currentCompilationTracks = tracks.filter(track => track.compilation === compilation.id)
          const currentTrack = currentCompilationTracks.find((track, index) => {
            const nextTrackStart = currentCompilationTracks[index + 1]?.start ?? Infinity
            return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
          })
          currentArtist.value = artists.find(artist => artist.id === currentTrack.artist)
          currentTitle.value = currentTrack.title
          currentLink.value = currentTrack.link
        }
      })
    }
  }, 1000)
})
</script>

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

.logo,
.button,
.shadow,
.animation,
.mix {
  transition: .7s opacity;
}

.screen {
  position: absolute;
  height: 100vh;
  min-width: 100%;
  max-width: 100%;
}

.splash-screen {
  position: relative;
  height: 100vh;
  background-color: black;
}

.animation {
  z-index: 1;
  object-fit: cover;
  opacity: .8;
  /* opacity: 0; */
}

.mix {
  z-index: 4;
  position: fixed;
}

.shadow {
  z-index: 3;
  box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
  opacity: .9;
}

.ui {
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

.hide {
  opacity: 0;
  z-index: 0;
}

.show {
  opacity: 1;
}
</style>