"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 [assets, setAssets] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();
  //提交反馈
  const handleSubmit = async () => {
    if (!value) {
      Toast.show({
        icon: "fail",
        content: "反馈内容不能为空",
        position: "top",
      });
      return;
    }

    //提交数据
    setIsSubmitting(true);
    // const media = await multiUpload(assets);
    const media = await multiUploadImage(assets);
    // console.log("media",media)
    const account = await get("account");
    try {
      const data = await requireAPI("POST", `/api/feedback/create`, {
        body: {
          mid: account.mid,
          discription: value,
          credentials: media,
        },
      });
      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}
          className="h-32 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>
        <UploadImgs assets={assets} getImgs={setAssets} />
        <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>
  );
}