<script>
  import { Link } from "svelte-navigator";
  import { onMount } from "svelte";

  export let audioId;
  export let videoId;

  let videoUrl = "";
  let audioUrl = "";

  $: videoCode = extract(videoUrl);
  $: audioCode = extract(audioUrl);

  let videoReady = false;
  let audioReady = false;

  let videoPlayer;
  let audioPlayer;

  function extract(url) {
    const match = url.match(/(youtu\.be\/|youtube\.com\/watch\?v=)([\w]+)/);
    if (match) {
      return match[2];
    } else {
      return "???";
    }
  }

  onMount(async () => {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    const currentResult = await fetch("grid.php");
    if (!currentResult.ok) {
      alert(currentResult.status);
      return;
    }
    const current = await currentResult.json();
    videoUrl = current.find((link) => link.id == videoId).url;
    audioUrl = current.find((link) => link.id == audioId).url;

    // @ts-ignore
    window.onYouTubeIframeAPIReady = () => {
      // @ts-ignore
      videoPlayer = new YT.Player("videoPlayer", {
        videoId: videoCode,
        events: {
          onReady: () => {
            videoReady = true;
          },
        },
      });

      // @ts-ignore
      audioPlayer = new YT.Player("audioPlayer", {
        videoId: audioCode,
        events: {
          onReady: () => {
            audioReady = true;
          },
        },
      });
    };
  });

  function go() {
    videoPlayer.playVideo();
    videoPlayer.mute();
    audioPlayer.playVideo();
  }
</script>

<main>
  <a class="link" href="javascript:;" on:click={go}>START</a>

  <div id="player">
    <h2 title={videoUrl}>Video</h2>
    <div id="videoPlayer" />
    <h2 title={audioUrl}>Audio</h2>
    <div id="audioPlayer" />
  </div>

  <Link class="link" to="/">BACK</Link>
</main>

<style>
  main {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  :global(.link) {
    font-family: inherit;
    font-size: inherit;
    padding: 1em 2em;
    margin: 2rem;
    color: white;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0);
    outline: none;
    width: 200px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-decoration: none;
  }

  #audioPlayer {
    height: 128px;
  }
</style>
