"use client";

import React, { useState } from "react";
import { Button, TextArea, Toast } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
import UploadImgs from "@/components/UploadImgs";
import { get } from "@/utils/storeInfo";
import { multiUploadImage } from "@/utils/upload";
import requireAPI from "@/utils/requireAPI";
export default function Feedback() {
  const [value, setValue] = useState();
  const [imgAssets, setImgAssets] = useState([]);
  const [videoAssets, setVideoAssets] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();
  //提交反馈
  const handleSubmit = async () => {
    if (!value) {
      Toast.show({
        icon: "fail",
        content: "反馈内容不能为空",
        position: "top",
      });
      return;
    }
    if (imgAssets.length + videoAssets.length > 9) {
      Toast.show({
        icon: "fail",
        content: "最多上传9个图片或视频",
        position: "top",
      });
      return;
    }
    //提交数据
    setIsSubmitting(true);
    // const media = await multiUpload(assets);
    const { image_ids } = await multiUploadImage(imgAssets, 1);
    const { video_ids } = await multiUploadImage(videoAssets, 2);

    const media = { image_ids, video_ids };

    // console.log("media",media)
    const account = await get("account");
    debugger;

    try {
      const data = await requireAPI(
        "POST",
        `/api/feedback/create`,
        {
          body: {
            mid: account.mid,
            discription: value,
            credentials: media,
          },
        },
        false,
        100000
      );
      if (data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: data.msg,
          position: "top",
        });
        return;
      }
      //提交成功后显示Toast并返回上一页
      Toast.show({
        icon: "success",
        content: "反馈提交成功",
        position: "top",
      });
      router.back();
    } catch (error) {
      // console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <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-base font-medium text-white">反馈描述</p>
        <TextArea
          placeholder="请填写详细描述，以便我们更好地为您解决问题"
          onChange={(value) => setValue(value)}
          value={value}
          autoSize={{ minRows: 6, maxRows: 15 }}
          className="min-h-32 max-h-96 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
          style={{ "--placeholder-color": "#FFFFFF80", "--font-size": "16px" }}
        />
        <p className="text-base font-medium text-white mt-4 mb-1">
          截图或录屏（最多9张）
        </p>
        <div className="mb-4">
          <p className="my-2">图片</p>
          <UploadImgs
            accept="image/png, image/jpeg, image/jpg"
            assets={imgAssets}
            getImgs={setImgAssets}
          />
        </div>
        <p className="my-2">视频</p>
        <UploadImgs
          accept="video/*"
          type={2}
          id="uploadVideoBtn3"
          assets={videoAssets}
          getImgs={setVideoAssets}
        />
        <div className="mt-16">
          <Button
            shape="rounded"
            size="middle"
            block
            onClick={handleSubmit}
            style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
            disabled={isSubmitting}
          >
            {/* {isSubmitting && <ActivityIndicator size="small" color="white" />} */}
            {isSubmitting ? "正在提交..." : "提交"}
          </Button>
        </div>
      </div>
    </div>
  );
}