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) => {
  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={() => 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-30"
              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={() => 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,
  });
};
//保存div内容为图片
export const saveImage = 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 saveFile = async (href) => {
  const isVip = 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); // 下载后移除元素
};