Video

export const loadYouTubeApi = () => {
  // checking the YoutubeIframeAPI object available
  if (!window.YouTubeIframeApiReady) {
    const tag = document.createElement('script');

    tag.src = '//www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    window.YouTubeIframeApiReady = false;

    // YouTube's api will call this function when initialised.
    window.onYouTubeIframeAPIReady = () => {
      window.YouTubeIframeApiReady = true;
    };
  }
};

export default parentElement => {
  const video = parentElement.querySelector('.video__player-wrap');
  const poster = parentElement.querySelector('.video__poster');
  const playButton = parentElement.querySelector('.play-button');

  if (parentElement.getAttribute('data-behavior') !== 'lightbox-video') {
    video.classList.add('visually-hidden');
    playButton.classList.add('visually-hidden');
  }
  let player;

  const initVideoPlayer = () => {
    playButton.classList.remove('visually-hidden');
    parentElement.classList.add('video--is-ready');
    parentElement.classList.add('video--is-stopped');
    [poster, playButton].forEach(control =>
      control.addEventListener('click', () => player.playVideo())
    );
    video.addEventListener('click', () => player.pauseVideo());
  };

  const initLightboxVideoPlayer = () => {
    parentElement.classList.add('video--is-ready');
    parentElement.classList.add('video--is-stopped');
    player.playVideo();
  };

  const onPlayerReady = () => {
    if (parentElement.getAttribute('data-behavior') === 'lightbox-video') {
      initLightboxVideoPlayer();
    } else {
      initVideoPlayer();
    }
  };

  const onPlayerStateChange = event => {
    if (event.data === window.YT.PlayerState.PLAYING) {
      if (!poster) {
        return;
      }
      poster.classList.add('visually-hidden');
      video.classList.remove('visually-hidden');
      parentElement.classList.add('video--is-playing');
      parentElement.classList.remove('video--is-stopped');

      if (
        window.innerWidth < 820 &&
        parentElement.getAttribute('data-behavior') !== 'lightbox-video'
      ) {
        video.requestFullscreen();
      }
    } else {
      if (parentElement.getAttribute('data-behavior') !== 'lightbox-video') {
        poster.classList.remove('visually-hidden');
        video.classList.add('visually-hidden');
        playButton.classList.remove('visually-hidden');
      }
      if (parentElement.classList.contains('video--is-playing')) {
        parentElement.classList.add('video--is-stopped');
        parentElement.classList.remove('video--is-playing');
      }
      if (document.fullscreenElement) {
        document.exitFullscreen();
      }
    }
  };
  const onPlayerError = () => {
    if (parentElement.getAttribute('data-behavior') === 'lightbox-video') {
      const youtubevideo = document.querySelector('#lightbox-video-container');

      youtubevideo.querySelector('.video__player-wrap img').style.display =
        'block';
      // eslint-disable-next-line no-param-reassign
      youtubevideo.querySelector('.youtube-video-player').style.display =
        'none';
    }
  };
  const initVideo = () => {
    const { videoId } = parentElement.dataset;

    if (!videoId) {
      return;
    }
    const videoPlayerId = parentElement
      .querySelector('.youtube-video-player')
      .getAttribute('id');

    player = new window.YT.Player(videoPlayerId, {
      height: '390',
      width: '640',
      videoId,
      playsinline: 1,
      events: {
        onReady: onPlayerReady,
        onStateChange: onPlayerStateChange,
        onError: onPlayerError,
      },
    });
  };

  if (window.YouTubeIframeApiReady === undefined) {
    loadYouTubeApi();
    window.onYouTubeIframeAPIReady = () => {
      window.YouTubeIframeApiReady = true;
      initVideo();
    };
  } else {
    initVideo();
  }
};