import { useEffect, useMemo, useRef } from 'react';
import videojs from 'video.js';

import 'video.js/dist/video-js.css';

export const VideoJSPlayer = ({ options, onReady }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  const mergedOptions = useMemo(() => {
    return {
      autoplay: true,
      controls: false,
      responsive: true,
      muted: false,
      fluid: true,
      errorDisplay: false,
      html5: {
        vhs: {
          overrideNative: !videojs.browser.IS_SAFARI,
          enableLowInitialPlaylist: true,
        },
        nativeAudioTracks: false,
        nativeVideoTracks: false,
      },
      spatialNavigation: {
        enabled: true,
        horizontalSeek: true,
      },
      // Default smooth seeking to false
      enableSmoothSeeking: true,
      disableSeekWhileScrubbingOnMobile: true,
      ...options,
    };
  }, [options]);

  useEffect(() => {
    if (!playerRef.current) {
      const videoElement = document.createElement('video-js');

      videoElement.classList.add('vjs-big-play-centered');
      videoRef.current.appendChild(videoElement);

      const player = videojs(videoElement, mergedOptions, () => {
        videojs.log('Player is ready');

        onReady?.(player);
      });

      playerRef.current = player;
      playerRef.current.spatialNavigation.start(); // TODO
    } else {
      const player = playerRef.current;

      player.autoplay(mergedOptions.autoplay);
      player.src(mergedOptions.sources);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mergedOptions, videoRef]);

  // Dispose the Video.js player when the functional component unmounts
  useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);

  return (
    <div data-vjs-player>
      <div ref={videoRef} />
    </div>
  );
};