import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose } from "@fortawesome/free-solid-svg-icons";
import { Dialog, Toast } from "antd-mobile";
import html2canvas from "html2canvas";
import { checkRole } from "../auth";
import VideoPlayer from "@/components/VideoPlayer";
// export const handleShowVideos = (video) => {
//   Dialog.className = "videoMask";
//   Dialog.show({
//     title: "",
//     closeOnMaskClick: true,
//     content: (
//       <div className="flex flex-col gap-2">
//         <div className="flex w-full justify-end">
//           <div
//             className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
//             key="closeBtn"
//             onClick={() => Dialog.clear()}
//           >
//             <FontAwesomeIcon icon={faClose} size="2xl" />
//           </div>
//         </div>
//         <div className="my-4">
//           <video
//             width="100%"
//             height="100%"
//             controls
//             className="w-screen h-[70vh] rounded-lg object-contain"
//             poster={video.url}
//           >
//             <source src={video.mp4} type="video/mp4" />
//             您的浏览器不支持 Video 标签。
//           </video>
//         </div>
//         {/* <div
//           className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
//           key="closeBtn"
//           // onClick={handleSeeAllPhotos}
//         >
//           <FontAwesomeIcon icon={faSave} size="2xl" />
//         </div> */}
//       </div>
//     ),
//     bodyStyle: {
//       background: "none",
//       maxHeight: "none",
//       height: "100%",
//     },
//   });
// };
export const handleShowVideo = (video) => {
  document.body.style.overflow = "hidden";
  const scrollY = window.scrollY;
  Dialog.className = "videoMask";
  Dialog.show({
    title: "",
    bodyClassName: "!p-0",
    content: (
      <div className="h-screen flex justify-center items-center relative">
        <div
          className="h-screen w-screen absolute"
          onClick={() => {
            if (scrollY !== 0) {
              window.scrollTo(0, scrollY);
            }
            Dialog.clear();
          }}
        ></div>
        <div className="w-screen flex flex-col gap-2 pointer-events-none absolute top-0">
          <div
            className="w-full h-screen pointer-events-auto relative "
            style={{ background: "#00000080" }}
          >
            {/* <video
            width="100%"
            height="100%"
            controls
            muted={true}
            className="w-screen h-[70vh] rounded-lg object-contain"
            poster={video?.url}
            // autoPlay={true}
          >
            <source src={video.mp4} type="video/mp4" />
            您的浏览器不支持 Video 标签。
          </video> */}
            {/* <Video as={ReactPlayer} src={video.mp4} /> */}
            <div className="absolute top-1/2 -translate-y-1/2 w-full">
              <VideoPlayer video={video} />
            </div>

            {/* <label
              onClick={() => {
                const videoPlayer = document.getElementById("videoPlayer");
                console.log("videoPlayer", videoPlayer, videoPlayer.click);
                // videoPlayer.play();
                if (state.play) {
                  state.play = false;
                  videoPlayer.pause();
                } else {
                  state.play = true;
                  videoPlayer.play();
                }
              }}
              className="block w-full h-screen bg-[#ab27275e] absolute top-0"
            /> */}
            <div
              className="max-w-max absolute top-[21px] right-4  z-[9999]"
              style={{ top: "21px", zIndex: 30 }}
            >
              <div
                className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
                key="closeBtn"
                onClick={() => {
                  if (scrollY !== 0) {
                    window.scrollTo(0, scrollY);
                  }
                  Dialog.clear();
                }}
              >
                <FontAwesomeIcon icon={faClose} size="2xl" />
              </div>
            </div>
            {/* <Player
            src="https://www.mydomain.com/remote-video.mp4"
            poster="https://www.mydomain.com/remote-poster.webp"
            blurDataURL="data:image/webp;base64,UklGRlA..."
          /> */}
          </div>
          {/* <div
          className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
          key="closeBtn"
          onClick={() => saveFile(video.mp4)}
        >
          <FontAwesomeIcon icon={faSave} size="2xl" />
        </div> */}
        </div>
      </div>
    ),
    bodyStyle: {
      background: "none",
      maxHeight: "none",
      height: "100%",
    },
    closeOnMaskClick: true,
    onClose: () => {
      document.body.style.overflow = "visible";
    },
  });
};
//保存div内容为图片
export const saveDivImage = async (divId) => {
  if (typeof window == "undefined") return;
  const div = document.getElementById(divId);
  html2canvas(div, { useCORS: true }).then(function (canvas) {
    // 创建一个图片元素
    var img = canvas.toDataURL("image/jpg");
    // 创建一个链接元素
    var link = document.createElement("a");
    link.href = img;
    // 设置下载的文件名
    link.download = "SAVE_IMAGE.jpg";
    // 触发点击
    link.click();
  });
};
//保存图片
export const saveImage = async (url) => {
  if (typeof window == "undefined") return;
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      const url = URL.createObjectURL(blob);
      // 创建一个链接元素
      var link = document.createElement("a");
      link.href = url;
      // 设置下载的文件名
      link.download = "SAVE_IMAGE.jpg";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    })
    .catch((error) => console.log(error));
};
export const saveFile = async (href) => {
  const isVip = await checkRole();
  if (!isVip) {
    // setIsVipModalVisible(true);
    Toast.show({
      icon: "fail",
      content: "仅会员支持下载",
      position: "top",
    });
    return;
  }
  if (typeof window == "undefined") return;
  var link = document.createElement("a");
  link.href = href;
  link.target = "_blank";
  // 设置下载的文件名
  link.download = "newfile.mp4";
  // 触发点击
  // link.click();
  link.style.display = "none"; // 设置为隐藏元素
  document.body.appendChild(link);
  link.click(); // 模拟点击以开始下载
  document.body.removeChild(link); // 下载后移除元素
};

export const toggleFullScreen = (videoEleId, controllerId, getState) => {
  const video = document.getElementById(videoEleId);
  const controller = document.getElementById(controllerId);
  const videoHeight = window.getComputedStyle(video).height;
  const videoWidth = window.getComputedStyle(video).width;

  if (!document.fullscreenElement) {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      // Firefox
      video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
      // Chrome, Safari and Opera
      video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) {
      // IE/Edge
      video.msRequestFullscreen();
    }
    // console.log("toggleFullScreen", video);
    if (!video || !controller) return;
    // video.style.transform =
    //   "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important";
    // video.firstChild.className = "h-[100vw] w-[100vh] origin-left";
    // video.firstChild.style = {
    //   transform: "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important",
    //   width: "100vh",
    //   height: "100vw",
    //   transformOrigin: "left",
    // };
    if (videoWidth < videoHeight) {
      video.firstChild.style.width = "100vw";
      video.firstChild.style.height = "100vh";
      controller.style.width = "100vw";
      controller.style.height = "100vh";
      // controller.firstChild.style.marginLeft = "10px";
      // controller.firstChild.style.transform = "rotate(180deg)";
      // controller.firstChild.style.transformOrigin = "center center";
    } else {
      video.firstChild.style.transform =
        "translateX(50vw) translateY(-24.4vh) rotate(90deg)";
      video.firstChild.style.width = "100vh";
      video.firstChild.style.height = "100vw";
      video.firstChild.style.transformOrigin = "left";
      controller.style.width = "100vw";
      controller.style.height = "100vh";
      controller.firstChild.style.marginLeft = "10px";
      // controller.firstChild.style.transform = "rotate(180deg)";
      // controller.firstChild.style.transformOrigin = "center center";
    }

    getState((old) => !old);
  } else {
    // console.log("toggleFullScreen", video);
    if (!video || !controller) return;
    // video.style.transform =
    //   "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important";
    // video.firstChild.className = "h-[100vw] w-[100vh] origin-left";
    // video.firstChild.style = {
    //   transform: "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important",
    //   width: "100vh",
    //   height: "100vw",
    //   transformOrigin: "left",
    // };
    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";
    // controller.firstChild.style.transform = "rotate(180deg)";
    // controller.firstChild.style.transformOrigin = "center center";
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      // Firefox
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      // Chrome, Safari and Opera
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      // IE/Edge
      document.msExitFullscreen();
    }

    getState((old) => !old);
  }
};