import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js"
import Visualizer from "./viz.js"

export function init() {
  function updateMeta(data) {
    var title = data.title;
    var listeners = data.listeners;
    $('#title').text(title);
    $('#listeners').text(listeners + " listeners");
  }

  function visToggle() {
    if (!document.hidden) {
      visualizer.start();
    }
  }
  document.addEventListener('visibilitychange', visToggle);

  var visualizer = null;
  var audioPlayer = document.getElementById("audio-player");
  var loaderWidget = document.getElementById("loader");

  $('#the-button').click(() => {
    if (visualizer == null) {

      audioPlayer.play();

      $(loaderWidget).addClass("show");
      $('#the-button').remove();

      setTimeout(() => {
        visualizer = new Visualizer(audioPlayer);
        setTimeout(() => {
          visualizer.start();
        }, 0);
      }, 0);
    }
  });

  var socket = io();
  socket.on('connect', () => {
    socket.emit('live.hello', {});
  });
  socket.on('live.heartbeat', (heartbeat) => {
    console.log('heartbeat')
    console.log(heartbeat)
    updateMeta(heartbeat)
  });

  window.addEventListener("resize", _.debounce(() => {
    visualizer.resize();
  }, 100));

  audioPlayer.addEventListener("waiting", (evt) => {
    $(loaderWidget).addClass("show");
  });
  audioPlayer.addEventListener("playing", (evt) => {
    $(loaderWidget).removeClass("show");
  });
}