"use client";

import React, { useState } from "react";
import { Button, Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import OwnInput from "@/components/OwnInput";
import UploadImgs from "@/components/UploadImgs";
import { multiUploadImage } from "@/utils/upload";
import { get } from "@/utils/storeInfo";
import requireAPI from "@/utils/requireAPI";
export default function JoinGuild() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    guild_name: "",
    contact_name: "",
    contact_way: "",
    streamer_num: "",
    cooperated_platform: "",
    account_shot: [],
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (values) => {
    if (
      !values.guild_name ||
      !values.contact_name ||
      !values.contact_way ||
      !values.cooperated_platform
    ) {
      Toast.show({
        icon: "fail",
        content: "请完善信息后提交",
        position: 60,
      });
      return;
    }
    setIsSubmitting(true);
    let account_shot = null;
    if (values.account_shot.length != 0) {
      account_shot = await multiUploadImage(values.account_shot, 1);
      if (!account_shot.image_ids.length) {
        Toast.show({
          icon: "fail",
          content: "上传失败，请联系客服进行上传",
          position: 60,
        });
        setIsSubmitting(false);
        return;
      }
    }

    //上传表单
    const body = {
      ...values,
      account_shot,
      streamer_num: parseInt(values.streamer_num, 10),
    };
    try {
      const streamerData = await requireAPI(
        "POST",
        "/api/guild_registration/create",
        {
          body,
        },
        true,
        100000
      );
      if (streamerData.ret === -1) {
        Toast.show({
          icon: "fail",
          content: streamerData.msg,
          position: 60,
        });
        return;
      }
      //提交成功后跳转成功页
      router.replace("/my/streamerVerification/afterSubmitGuildVerification");
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <div>
      {/* 头部标题 */}
      <div className="p-4 fixed top-0 z-10 w-full bg-black flex justify-between items-center">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
          <FontAwesomeIcon
            icon={faAngleLeft}
            style={{ maxWidth: "12px" }}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">公会入驻</p>
        <p></p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4 mt-2">
        <div className="flex justify-between items-center">
          <p className="text-sm">
            <span>审核资料（仅用于审核，不对外展示）</span>
            <span className="text-[#f00]">*</span>
          </p>
        </div>
        <div className="mt-4">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>公会名称</span>
              <span className="text-[#f00]">*</span>
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入公会名称"
              value={formData.guild_name}
              onChange={(value) =>
                setFormData((old) => ({ ...old, guild_name: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>联络人</span>
              <span className="text-[#f00]">*</span>
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入联络人"
              value={formData.contact_name}
              onChange={(value) =>
                setFormData((old) => ({ ...old, contact_name: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>联系方式</span>
              <span className="text-[#f00]">*</span>
            </p>
            <p className="text-[#ffffffae] text-xs">注明方式，如“电话:xxxxx”</p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入您的联系方式"
              value={formData.contact_way}
              onChange={(value) =>
                setFormData((old) => ({ ...old, contact_way: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>达人数量</span>
              <span className="text-[#f00]">*</span>
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="number"
              placeholder="请输入达人数量"
              value={formData.streamer_num}
              onChange={(value) =>
                setFormData((old) => ({ ...old, streamer_num: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>合作过的平台</span>
              <span className="text-[#f00]">*</span>
            </p>
          </div>
          <div className="mt-2 px-4 py-3 h-12 rounded-[0.8rem] bg-[#FFFFFF1a] flex justify-between items-center">
            <OwnInput
              type="text"
              placeholder="请输入合作过的平台"
              value={formData.cooperated_platform}
              onChange={(value) =>
                setFormData((old) => ({ ...old, cooperated_platform: value }))
              }
            />
          </div>
        </div>
        <div className="mt-6">
          <div className="flex justify-between items-center">
            <p className="text-sm">
              <span>账号截图</span>
            </p>
            <p className="text-[#ffffffae] text-xs">
              各平台账号截图（最多9张）
            </p>
          </div>
          <div className="mt-2">
            <UploadImgs
              type={1}
              assets={formData.account_shot}
              getImgs={(imgs) => {
                setFormData((old) => ({ ...old, account_shot: imgs }));
              }}
            />
          </div>
        </div>
        <div className="mt-10 flex justify-center">
          <Button
            size="middle"
            shape="rounded"
            style={{
              "--background-color": "#FF669E",
              paddingLeft: "32px",
              paddingRight: "32px",
            }}
            disabled={isSubmitting}
            onClick={() => handleSubmit(formData)}
          >
            {isSubmitting ? "正在提交..." : "提交"}
          </Button>
        </div>
      </div>
    </div>
  );
}