import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";

import { popPanel } from "../../actions/panelActions";
import TButton from "../../components/TButton/TButton";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
import usePrevious from "../../hooks/usePrevious";
import css from "./VideoTestPanel.module.less";

const YOUTUBECONFIG = {
  playerVars: {
    controls: 0, // 플레이어 컨트롤 표시
    disablekb: 1,
    // enablejsapi: 1,
    listType: "user_uploads",
    fs: 0,
    rel: 0, // 관련 동영상 표시 안 함
    showinfo: 0,
    loop: 0,
    iv_load_policy: 3,
    modestbranding: 1,
    wmode: "opaque",
    // origin: origin,
    cc_lang_pref: "en",
    cc_load_policy: 0,
  },
};

const TEST_URLS = [
  "https://www.youtube.com/watch?v=A1cmsCO4LvY",
  "https://www.youtube.com/watch?v=IfHA3zOE6dQ",
  "https://www.youtube.com/watch?v=Mef85O8gYIA",
  "https://youtu.be/bSgjf7nF5CU",
  "https://www.youtube.com/embed/mqGEVNYiqxw?autoplay=1&mute=0&controls=0&origin=http%3A%2F%2Flocalhost%3A3000&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&disablekb=1&enablejsapi=1&listType=user_uploads&fs=0&loop=0&wmode=opaque&cc_lang_pref=en&cc_load_policy=1&widgetid=3",
];
export default function VideoTestPanel({ spotlightId }) {
  const dispatch = useDispatch();
  const [videoIndex, setVideoIndex] = useState(0);
  const [captionEnabled, setCaptionEnabled] = useState(false);
  const [showCaption, setShowCaption] = useState(true);
  const videoNode = useRef(null);
  const showCaptionRef = usePrevious(showCaption);

  const setVideoRef = useCallback(
    (video) => {
      videoNode.current = video;
    },
    [showCaption]
  );

  const handleCaption = useCallback(() => {
    if (!captionEnabled) {
      return;
    }
    if (videoNode.current) {
      if (!showCaption) {
        videoNode.current.loadModule("captions");
        videoNode.current.setOption("captions", "track", {
          languageCode: "en",
        });
      } else {
        videoNode.current.unloadModule("captions");
      }
    }
    setShowCaption(!showCaption);
  }, [showCaption, captionEnabled]);

  const changeVideo = useCallback(() => {
    // setShowCaption(false);
    setVideoIndex((videoIndex + 1) % TEST_URLS.length);
  }, [videoIndex]);

  const onStart = useCallback((ev) => {
    if (videoNode.current.getOptions("captions").length > 0) {
      setCaptionEnabled(true);
      if (showCaptionRef.current) {
        videoNode.current.loadModule("captions");
        videoNode.current.setOption("captions", "track", {
          languageCode: "en",
        });
      }
    } else {
      setCaptionEnabled(false);
    }
  }, []);

  const onBackClick = useCallback(() => {
    dispatch(popPanel());
  }, [dispatch]);

  return (
    <TPanel isTabActivated={false} spotlightId={spotlightId}>
      <THeader onBackButton title={"VideoTest"} onClick={onBackClick} />
      <div>{"url: " + videoIndex + " " + TEST_URLS[videoIndex]}</div>
      <div>{"caption Enabled: " + (videoNode.current && captionEnabled)}</div>
      <div>{"caption is On: " + showCaption}</div>
      <TReactPlayer
        url={TEST_URLS[videoIndex]}
        playing={true}
        config={{
          youtube: YOUTUBECONFIG,
        }}
        videoRef={setVideoRef}
        onStart={onStart}
      ></TReactPlayer>
      <TButton onClick={changeVideo}>{"changeVideo"}</TButton>
      <TButton onClick={handleCaption} disabled={!captionEnabled}>
        {"ToggleCaption"}
      </TButton>
    </TPanel>
  );
}
