import { PeerTubePlayer } from '@peertube/embed-api';
import 'regenerator-runtime/runtime';
import { toggleVideoPlaying } from './video-controls';
import { getVideoData } from './scheduling';

const streamData = getVideoData();

const videoWrapper = document.getElementById('video-wrapper');
const overlay = document.getElementById('overlay');
const videoiFrame = document.querySelector('iframe.video-player');

const video = {
  isPlaying: false,
  overlayVisible: false,
};

export const setUpPlayer = async () => {
  const player = new PeerTubePlayer(videoiFrame);

  await player.ready;

  onPlayerReady(player);
  app();
};

const app = () => {
  if (streamData && streamData) {
    console.log({ streamData });
  }
};

const onPlayerReady = (player) => {
  videoWrapper.addEventListener('mousemove', showOverlay);

  videoWrapper.addEventListener('click', () => {
    toggleVideoPlaying({
      player,
      video,
      onPlay: () => {
        hideOverlay();
      },
      onPause: () => {
        showOverlay();
      },
    });
    video.isPlaying = !video.isPlaying;
  });
};

const showOverlay = () => {
  if (!video.overlayVisible) {
    videoWrapper.classList.add('active');
    overlay.classList.add('active');

    setTimeout(hideOverlay, 2000);
  }
  video.overlayVisible = true;
};

const hideOverlay = () => {
  if (video.isPlaying) {
    video.overlayVisible = false;
    videoWrapper.classList.remove('active');
    overlay.classList.remove('active');
  }
};

setUpPlayer();