import Hls from "hls.js";
import { useEffect, useMemo, useRef, useState } from "react";
import { WISH } from "wish";

export enum VideoStatus {
  Online = "online",
  Offline = "offline",
}

export interface VideoPlayerProps {
  stream?: string;
  status?: string;
  poster?: string;
}

export function LiveVideoPlayer(props: VideoPlayerProps) {
  const video = useRef<HTMLVideoElement>(null);
  const streamCached = useMemo(() => props.stream, [props.stream]);
  const [status, setStatus] = useState<VideoStatus>();
  const [src, setSrc] = useState<string>();

  useEffect(() => {
    if (streamCached && video.current) {
      if (Hls.isSupported()) {
        try {
          const hls = new Hls();
          hls.loadSource(streamCached);
          hls.attachMedia(video.current);
          hls.on(Hls.Events.ERROR, (event, data) => {
            console.debug(event, data);
            const errorType = data.type;
            if (errorType === Hls.ErrorTypes.NETWORK_ERROR && data.fatal) {
              hls.stopLoad();
              hls.detachMedia();
              setStatus(VideoStatus.Offline);
            }
          });
          hls.on(Hls.Events.MANIFEST_PARSED, () => {
            setStatus(VideoStatus.Online);
          });
          hls.on(Hls.Events.LEVEL_SWITCHING, (e, l) => {
            console.debug("HLS Level Switch", l);
          });
          return () => hls.destroy();
        } catch (e) {
          console.error(e);
          setStatus(VideoStatus.Offline);
        }
      } else {
        setSrc(streamCached);
        setStatus(VideoStatus.Online);
        video.current.muted = true;
        video.current.load();
      }
    }
  }, [video, streamCached, props.status]);

  return (
    <div className="video-overlay">
      <div className={status}>
        <div>{status}</div>
      </div>
      <video
        ref={video}
        autoPlay={true}
        poster={props.poster}
        src={src}
        playsInline={true}
        controls={status === VideoStatus.Online}
      />
    </div>
  );
}

export function WebRTCPlayer(props: VideoPlayerProps) {
  const video = useRef<HTMLVideoElement>(null);
  const streamCached = useMemo(
    () =>
      "https://customer-uu10flpvos4pfhgu.cloudflarestream.com/7634aee1af35a2de4ac13ca3d1718a8b/webRTC/play",
    [props.stream]
  );
  const [status] = useState<VideoStatus>();
  //https://customer-uu10flpvos4pfhgu.cloudflarestream.com/7634aee1af35a2de4ac13ca3d1718a8b/webRTC/play

  useEffect(() => {
    if (video.current && streamCached) {
      const client = new WISH();
      client.addEventListener("log", console.debug);
      client.WithEndpoint(streamCached, true);

      client
        .Play()
        .then((s) => {
          if (video.current) {
            video.current.srcObject = s;
          }
        })
        .catch(console.error);
      return () => {
        client.Disconnect().catch(console.error);
      };
    }
  }, [video, streamCached]);

  return (
    <div className="video-overlay">
      <div className={status}>
        <div>{status}</div>
      </div>
      <video
        ref={video}
        autoPlay={true}
        poster={props.poster}
        controls={status === VideoStatus.Online}
      />
    </div>
  );
}