import React, { useEffect, useState, useRef } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
import { Toast } from "antd-mobile";
import BackgroundPlayer from "next-video/background-player";
import { toggleFullScreen } from "@/utils/tools/handleFuns";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";
export default function VideoPlayer({ video }) {
  const [videoState, setVideoState] = useState({
    play: true,
    currentTimePercentage: 0,
  });
  const [showController, setShowController] = useState(false);
  const [screenState, setScreenState] = useState(false);
  const isSliding = useRef(null);
  const userAgent = window && window.navigator?.userAgent;
  // const currentTime = useMemo(()=>{
  //   const videoPlayer = document.getElementById("videoPlayer");
  //   if (videoPlayer) {
  //     return videoPlayer.currentTime;
  //   }
  //   return 0;
  // })
  useEffect(() => {
    window.onresize = function () {
      if (document.fullscreenElement) {
        console.log("进入全屏");
      } else {
        console.log("退出全屏");
        const video = document.getElementById("videoContainer");
        const controller = document.getElementById("controllerContainer");
        if (!video || !controller) return;
        video.firstChild.style.transform = "none";
        video.firstChild.style.width = "auto";
        video.firstChild.style.height = "auto";
        video.firstChild.style.transformOrigin = "";
        controller.style.width = "100%";
        controller.style.height = "100%";
        controller.firstChild.style.marginLeft = "0";
        setScreenState(false);
      }
    };

    const videoPlayer = document.getElementById("videoPlayer");
    const openVolum = () => {
      videoPlayer.muted = false;
    };
    const pauseVideo = () => {
      setVideoState((old) => ({ ...old, play: false }));
    };
    const updateTime = () => {
      // console.log((videoPlayer.currentTime / videoPlayer.duration) * 100);
      if (!isSliding.current)
        setVideoState((old) => ({
          ...old,
          currentTimePercentage:
            (videoPlayer.currentTime / videoPlayer.duration) * 100,
        }));
    };
    if (videoPlayer) {
      videoPlayer.addEventListener("loadedmetadata", openVolum);
      videoPlayer.addEventListener("ended", pauseVideo);
      videoPlayer.addEventListener("timeupdate", updateTime);
    }
    return () => {
      if (videoPlayer) {
        videoPlayer.removeEventListener("loadedmetadata", openVolum);
        videoPlayer.removeEventListener("ended", pauseVideo);
        videoPlayer.removeEventListener("timeupdate", updateTime);
      }
    };
  }, []);

  const getCurrentTime = (value) => {
    const videoPlayer = document.getElementById("videoPlayer");
    if (!videoPlayer) null;
    const totalTime = videoPlayer?.duration;
    let timeSec = 0;
    timeSec = (totalTime * (100 - value)) / 100;
    const hour = Math.floor(timeSec / (60 * 60));
    const minute = Math.floor((timeSec - hour * (60 * 60)) / 60);
    const second = Math.floor(timeSec - hour * (60 * 60) - minute * 60);
    return {
      desc: `${hour > 9 ? hour : "0" + hour}:${
        minute > 9 ? minute : "0" + minute
      }:${second > 9 ? second : "0" + second}`,
      timeSec: (totalTime * value) / 100,
    };
  };
  const toastValue = (value) => {
    isSliding.current = true;
    const videoPlayer = document.getElementById("videoPlayer");
    if (!videoPlayer) return;
    videoPlayer.pause();

    const currentTimeStr = getCurrentTime(value);
    console.log("currentTimeStr-----", currentTimeStr.desc);
    // if (!currentTimeStr) return;
    Toast.show({
      content: currentTimeStr.desc,
      position: "top",
      maskStyle: { "--z-index": 999999 },
    });
    videoPlayer.currentTime = currentTimeStr.timeSec;
    // console.log("currentTimeStr", currentTimeStr);
    setVideoState((old) => ({ play: false, currentTimePercentage: value }));
  };
  const handleStart = () => {
    const videoPlayer = document.getElementById("videoPlayer");
    if (!videoPlayer) return;
    videoPlayer.play();
    isSliding.current = false;
    setVideoState((old) => ({ ...old, play: true }));
  };
  return (
    <div className="relative bg-black" id="videoContainer">
      <div
        style={{ maxHeight: "90vh" }}
        className="overflow-hidden"
        onClick={() => setShowController((old) => !old)}
      >
        <BackgroundPlayer
          src={video.mp4}
          id="videoPlayer"
          // controlsList="none"
          poster={video?.url.src}
          blurDataURL={video?.url.blurDataURL}
          autoPlay={videoState.play}
          // style={{ height: "calc(100vh)" }}
        />
      </div>
      <div
        className={`pointer-events-none absolute h-full p-4 bottom-0 right-0 flex ${
          screenState && video.w > video.h
            ? "flex-col-reverse items-start  justify-evenly"
            : "w-full flex-row-reverse justify-between items-end gap-4 py-10"
        }`}
        style={{
          display: showController ? "flex" : "none",
        }}
        id="controllerContainer"
      >
        {/* <Slider
          value={videoState.currentTimePercentage}
          onAfterChange={handleStart}
          onChange={toastValue}
          icon={<div></div>}
          style={{ "--fill-color": "#ff669e" }}
        /> */}
        <div
          className={`pointer-events-auto flex items-center justify-center h-full px-4 ${
            !screenState ? "max-h-[60vh]" : "max-h-[80vh]"
          }`}
        >
          <Slider
            styles={{
              rail: {
                background: `#ff669e40`,
                width: 8,
              },
              track: {
                background: "#ff669e",
                width: 8,
              },
              handle: {
                borderColor: "#ff669e",
                background: "#ff669e",
                border: "2px solid #ff669e",
                opacity: 1,
                boxShadow: "0 0 0 5px #ff669e80",
                height: 24,
                width: 24,
                marginLeft: -8,
                marginTop: 0,
              },
            }}
            activeDotStyle={{
              borderColor: "#ff669e",
              background: "#ff669e80",
            }}
            vertical
            reverse={true}
            min={0}
            value={videoState.currentTimePercentage}
            onChangeComplete={handleStart}
            // startPoint={0}
            // marks={marks}
            // step={null}
            onChange={toastValue}
            defaultValue={0}
          />
        </div>
        <div
          className={`pointer-events-auto gap-4 px-4 ${
            screenState && video.w > video.h
              ? "grid grid-rows-[83px,30px,30px] mb-4 w-max "
              : "flex"
          }`}
        >
          <div
            className={`w-[83px] text-center text-white bg-[#ffffff80] rounded-lg px-2 py-1 h-max origin-bottom-left ${
              screenState && video.w > video.h
                ? "rotate-90 -translate-y-7 "
                : ""
            }`}
          >
            {getCurrentTime(videoState.currentTimePercentage).desc}
          </div>
          <div
            className={
              screenState && video.w > video.h
                ? "rotate-90 -translate-y-7  origin-bottom-left"
                : ""
            }
          >
            {/Android/i.test(userAgent) && (
              <div
                onClick={() => {
                  toggleFullScreen(
                    "videoContainer",
                    "controllerContainer",
                    setScreenState
                  );
                }}
                className="rounded-full bg-[#ffffff80] p-2 w-[30px] h-[30px]"
              >
                <svg
                  t="1734698522866"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4039"
                  width="100%"
                  height="100%"
                >
                  {screenState ? (
                    <path
                      d="M597.333333 128a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 0 42.666666 42.666666h256a42.666667 42.666667 0 1 0 0-85.333333h-153.002666l183.168-183.168a42.666667 42.666667 0 1 0-60.330667-60.330667L640 323.669333V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z m-170.666666 426.666667H170.666667a42.666667 42.666667 0 1 0 0 85.333333h153.002666l-183.168 183.168a42.666667 42.666667 0 1 0 60.330667 60.330667L384 700.330667V853.333333a42.666667 42.666667 0 1 0 85.333333 0v-256a42.666667 42.666667 0 0 0-42.666666-42.666666z"
                      p-id="21020"
                      fill="#ffffff"
                    ></path>
                  ) : (
                    <>
                      <path
                        d="M865.706667 719.36zM842.666667 719.36zM159.786667 520.746667a49.066667 49.066667 0 0 1-49.066667-49.066667V163.626667a49.066667 49.066667 0 0 1 49.066667-49.066667h299.52a49.066667 49.066667 0 0 1 0 98.133333H208.853333v258.986667a49.066667 49.066667 0 0 1-49.066666 49.066667z"
                        fill="#ffffff"
                        p-id="18397"
                      ></path>
                      <path
                        d="M437.973333 496.213333c-12.8 0-25.386667-4.906667-34.986666-14.72L124.8 197.973333c-18.986667-19.413333-18.773333-50.346667 0.64-69.333333 19.413333-18.986667 50.346667-18.773333 69.333333 0.64l278.186667 283.52c18.986667 19.413333 18.773333 50.346667-0.64 69.333333-9.6 9.386667-21.973333 14.08-34.346667 14.08zM872.96 921.173333H573.226667a49.066667 49.066667 0 0 1 0-98.133333h250.666666V564.053333a49.066667 49.066667 0 0 1 98.133334 0v308.053334a49.066667 49.066667 0 0 1-49.066667 49.066666z"
                        fill="#ffffff"
                        p-id="18398"
                      ></path>
                      <path
                        d="M872.96 921.173333c-12.8 0-25.386667-4.906667-34.986667-14.72L559.573333 622.933333c-18.986667-19.413333-18.773333-50.346667 0.64-69.333333 19.413333-18.986667 50.346667-18.773333 69.333334 0.64l278.4 283.52c18.986667 19.413333 18.773333 50.346667-0.64 69.333333-9.6 9.386667-21.973333 14.08-34.346667 14.08z"
                        fill="#ffffff"
                        p-id="18399"
                      ></path>
                    </>
                  )}
                </svg>
              </div>
            )}
          </div>
          <div
            className={`rounded-full bg-[#ffffff80] p-2 w-[30px] h-[30px] flex justify-center items-center ${
              screenState && video.w > video.h
                ? "rotate-90 -translate-y-7 origin-bottom-left"
                : ""
            }`}
          >
            <FontAwesomeIcon
              icon={videoState.play ? faPause : faPlay}
              color="#ffffff"
              // style={{ maxWidth: "32px" }}
              // size="lg"
              onClick={() => {
                const videoPlayer = document.getElementById("videoPlayer");
                if (videoState.play) {
                  setVideoState((old) => ({ ...old, play: false }));
                  videoPlayer.pause();
                } else {
                  setVideoState((old) => ({ ...old, play: true }));
                  videoPlayer.play();
                }
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}