<template>
  <h1>hell yeah</h1>
  <div @click="newDummyAudio"> NEW AUDIO</div>
  <div @click="showArtWork">SHOW ARTWORK</div>
  <div @click="play">PLAY</div>
</template>

<script  lang="ts" setup>
import { watch, onMounted } from 'vue'
import { useAudioStore, ensureAudio } from '~/stores/audio'

const createAudioTag = () => {
  const newDummyAudio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV')
  newDummyAudio.loop = true
  newDummyAudio.controls = true
  newDummyAudio.muted = true
  newDummyAudio.play()
}

const play = (state) => {
  const audio = newDummyAudio()
  if (state) {
    audio.play().catch(() => {})
  }
}

const showArtWork = () => {
  const pathKlein = window.location.origin + '/images/scenery/noise_artwork_1024.jpg'
  const pathGross = window.location.origin + '/images/scenery/noise_artwork_512.jpg'
  navigator.mediaSession.metadata = null
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Calm Speech Blocker',
    artist: 'mindboost',
    album: 'get your focus',
    artwork: [
      { src: pathKlein, sizes: '1024x1024', type: 'image/jpeg' },
      { src: pathGross, sizes: '512x512', type: 'image/jpeg' }
    ]
  })
}

watch(
  () => useAudioStore().getPlaying,
  (newVal) => {
  },
  { immediate: true }
)

// Media Session Setup separat
onMounted(async () => {
  const playState = useAudioStore().getPlaying
  await ensureAudio
  createAudioTag()
  showArtWork()
})
</script>
