"use client";
import React, { useState, useRef, useEffect } from "react";
import { Toast, Button, Divider, Image } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import UploadImgs from "@/components/UploadImgs";
import requireAPI from "@/utils/requireAPI";
import { multiUploadImage } from "@/utils/upload";
export default function EditStreamerMedia() {
  const router = useRouter();
  //保存封面图
  const [loading, setLoading] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [oldPhotos, setOldPhotos] = useState([]);
  const [frameImageUrl, setFrameImageUrl] = useState(null);
  const [formData, setFormData] = useState({
    imageAssets: [],
    displayImage: null,
    displayVideo: null,
  });
  const ref = useRef(null);
  useEffect(() => {
    getData();
  }, []);
  const getData = async () => {
    try {
      //获取主播数据
      const streamerData = await requireAPI(
        "POST",
        "/api/streamer/list_by_mid",
        {},
        true
      );
      if (streamerData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: streamerData.msg,
          position: "top",
        });
        return;
      }
      // setDisplayImage([
      //   {
      //     notChanged: true,
      //     id: { image_ids: streamerData.data.streamer.cover.image_ids },
      //     uri: streamerData.data.streamer.cover.images[0].urls[0],
      //   },
      // ]);
      // setDisplayVideo([
      //   {
      //     notChanged: true,
      //     id: { video_ids: streamerData.data.streamer.shorts.video_ids },
      //     cover: streamerData?.data?.streamer?.shorts?.videos[0]?.cover_urls[0],
      //   },
      // ]);
      // setOldPhotos(streamerData.data.streamer.album.images);
      setFormData((old) => ({
        ...old,
        displayImage: {
          url: streamerData.data.streamer.cover.images[0].urls[0],
          id: streamerData.data.streamer.cover.images[0].id,
          image_ids: [streamerData.data.streamer.cover.images[0].id],
        },
        displayVideo: {
          url: streamerData?.data?.streamer?.shorts?.videos[0]?.cover_urls[0],
          id: streamerData?.data?.streamer?.shorts?.videos[0]?.id,
          video_ids: [streamerData?.data?.streamer?.shorts?.videos[0]?.id],
        },
      }));
      setOldPhotos(
        streamerData.data.streamer.album.images.map((item) => ({
          url: item.urls[0],
          id: item.id,
        }))
      );
      setLoading(false);
    } catch (error) {
      console.error(error);
    }
  };

  const handleUploadImage = async (e, type) => {
    let file = e.target.files[0];
    if (!file) return;
    setLoading(true);
    if (type == 1) {
      setFormData((old) => ({
        ...old,
        displayImage: {
          url: URL.createObjectURL(file),
          file: Array.from(e.target.files),
        },
      }));
    } else {
      creatVideoCanvas(file);
      setFormData((old) => ({
        ...old,
        displayVideo: {
          url: frameImageUrl,
          file: Array.from(e.target.files),
        },
      }));
    }
    setLoading(false);
  };

  const handleSubmit = async () => {
    //相册不得低于2张
    if (formData.imageAssets.length < 2) {
      Toast.show({
        icon: "fail",
        content: "相册至少需要上传2张照片哦！",
        position: "top",
      });
      return;
    }
    //相册不得超过9张
    if (formData.imageAssets.length > 9) {
      Toast.show({
        icon: "fail",
        content: "相册最多只能上传9张照片哦！",
        position: "top",
      });
      return;
    }
    setIsSubmitting(true);
    const { displayImage, displayVideo, imageAssets } = formData;
    const cover = displayImage?.id
      ? displayImage
      : await multiUploadImage(displayImage.file, 1);
    const shorts = displayVideo?.id
      ? displayVideo
      : await multiUploadImage(displayVideo.file, 2);
    const newMedia = imageAssets.filter((it) => it.id == undefined);
    const media = await multiUploadImage(newMedia, 1);
    const album = {
      image_ids: [
        ...imageAssets.filter((it) => it.id != undefined).map((it) => it.id),
        ...media.image_ids,
      ],
    };
    if (
      !cover.image_ids.length ||
      !shorts.video_ids.length ||
      !album.image_ids.length
    ) {
      Toast.show({
        icon: "fail",
        content: "上传失败，请联系客服进行上传",
        position: "top",
      });
      setIsSubmitting(false);
      return;
    }

    //上传表单
    try {
      const streamerData = await requireAPI(
        "POST",
        "/api/streamer/update",
        {
          body: {
            cover: cover,
            shorts: shorts,
            album: album,
          },
        },
        true
      );
      if (streamerData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: streamerData.msg,
          position: "top",
        });
        return;
      }
      //提交成功后弹窗提示并返回上级
      Toast.show({
        icon: "fail",
        content: "提交成功，等耐心等待审核",
        position: "top",
      });
      router.back();
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const creatVideoCanvas = (file) => {
    if (typeof window == "undefined") return;
    const videoD = document.getElementById("videoD");
    const url = URL.createObjectURL(file);
    videoD.src = url;
    videoD.addEventListener("loadeddata", function () {
      const canvas = document.createElement("canvas");
      canvas.width = videoD.videoWidth;
      canvas.height = videoD.videoHeight;
      canvas
        .getContext("2d")
        .drawImage(videoD, 0, 0, canvas.width, canvas.height);
      const canvasImg = canvas.toDataURL();
      setFrameImageUrl(canvasImg);

      // 释放URL对象
      URL.revokeObjectURL(url);
    });
  };
  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">照片墙</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        <p className="text-sm text-[#F53030] font-medium">
          将展示在“推荐”、“主页”、“空间”，请认真完善
        </p>
        <div className=" my-2 py-4 bg-[#FFFFFF1A] px-3 rounded-2xl">
          <ul>
            <li className="flex justify-between items-center">
              <p className="text-base font-medium">
                <span className="text-[#F53030]">*</span>
                封面图
              </p>
              <label htmlFor="uploadBtn1">
                <div className="flex items-center">
                  {formData?.displayImage ? (
                    <Image
                      width={36}
                      height={36}
                      className="rounded-lg"
                      src={formData.displayImage?.url}
                      fit="cover"
                    />
                  ) : (
                    <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
                      请尽量选择横屏照片
                    </span>
                  )}
                  <div className="ml-2">
                    <FontAwesomeIcon
                      icon={faAngleRight}
                      style={{ maxWidth: "12px" }}
                      size="xl"
                    />
                  </div>
                </div>
              </label>
              <div className="hidden">
                <input
                  type="file"
                  accept="image/png, image/jpeg, image/jpg"
                  ref={ref}
                  id="uploadBtn1"
                  onChange={(e) => handleUploadImage(e, 1)}
                />
              </div>
            </li>
            <Divider />
            <li className="flex justify-between items-center">
              <p className="text-base font-medium">
                <span className="text-[#F53030]">*</span>
                展示视频
              </p>
              <label htmlFor="uploadBtn2">
                <div
                  // onClick={() => pickDisPlayImage()}
                  className="flex items-center"
                >
                  {formData?.displayVideo ? (
                    <Image
                      width={36}
                      height={36}
                      className="rounded-lg"
                      src={frameImageUrl || formData.displayVideo.url}
                      fit="cover"
                    />
                  ) : (
                    <span className="text-xs text-[#FFFFFF80] font-medium whitespace-nowrap">
                      请尽量选择横屏照片
                    </span>
                  )}
                  <div className="ml-2">
                    <FontAwesomeIcon
                      icon={faAngleRight}
                      style={{ maxWidth: "12px" }}
                      size="xl"
                    />
                  </div>
                </div>
              </label>

              <div className="hidden">
                <input
                  type="file"
                  accept="video/*"
                  ref={ref}
                  id="uploadBtn2"
                  onChange={(e) => handleUploadImage(e, 2)}
                />
              </div>
            </li>
            <Divider />
            <li>
              <div className="flex justify-between items-center">
                <p className="text-base font-medium">
                  <span className="text-[#F53030]">*</span>
                  相册
                </p>
                <div
                // onClick={() => pickDisPlayImage()}
                >
                  <span className="text-xs text-[#FFFFFF80] font-medium">
                    请上传2～9张照片
                  </span>
                </div>
              </div>
              <div className="mt-2">
                <UploadImgs
                  type={1}
                  existImages={oldPhotos}
                  assets={formData.imageAssets}
                  getImgs={(imgs) =>
                    setFormData((old) => ({ ...old, imageAssets: imgs }))
                  }
                />
              </div>
            </li>
          </ul>
        </div>
        <div className="mt-16">
          <Button
            shape="rounded"
            size="middle"
            block
            disabled={isSubmitting}
            // disabledStyle={tailwind("bg-[#FFFFFF80]")}
            onClick={handleSubmit}
            style={{ "--background-color": "#FF669E" }}
          >
            {/* {isSubmitting && <ActivityIndicator size="small" color="white" />} */}
            {isSubmitting ? "正在保存..." : "保存设置"}
          </Button>
        </div>
      </div>
      <div className="hidden">
        <video id="videoD" controls autoPlay name="media">
          <source />
          您的浏览器不支持 Video 标签。
        </video>
      </div>
    </div>
  );
}