"use client";

import React, { useState, useEffect } from "react";
import { Button, Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faSquareCheck } from "@fortawesome/free-solid-svg-icons";
import requireAPI from "@/utils/requireAPI";
export default function AfterSubmitGuildVerification() {
  const router = useRouter();
  const [wechatList, setWechatList] = useState([]);
  useEffect(() => {
    const getWechat = async () => {
      try {
        const data = await requireAPI("POST", "/api/support_wx_id/list", null);
        if (data.ret === -1) {
          Toast.show({
            icon: "fail",
            content: data.msg,
            position: "top",
          });
          return;
        }
        const temWechat = Object.entries(data.data);
        const temWechatList = temWechat.map((item) => item[1]);
        setWechatList(temWechatList);
      } catch (error) {
        console.error(error);
      }
    };
    getWechat();
  }, []);
  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">
        <div className="flex flex-col items-center p-4">
          <FontAwesomeIcon
            icon={faSquareCheck}
            style={{ maxWidth: "100px", width: "100px", height: "100px" }}
            // size={"100px"}
            color="#27F5B7"
          />
          <span className="text-2xl text-white font-medium mb-2">提交成功</span>
          <p className="text-base text-center text-white font-medium">
            您已成功提交审核材料，我们的工作人员将在3个工作日内主动联系您。
          </p>
          <br />
          <p className="text-base text-center text-white font-medium">
            如有疑问，请联系微信：
            <span className="text-[#F53030]">{wechatList[0]}</span>
          </p>
          <div className="mt-4">
            {wechatList.map((item, index) => {
              if (index === 0) return;
              return (
                <span key={index} className="text-base text-[#F53030]">
                  备用微信{index}：{item}
                </span>
              );
            })}
          </div>
          <div className="grid grid-rows-2 gap-4 px-4 mt-6">
            <Button
              size="middle"
              shape="rounded"
              style={{
                "--background-color": "#FFFFFF1A",
                paddingLeft: "32px",
                paddingRight: "32px",
              }}
              onClick={() => router.replace("/")}
            >
              <div className="flex flex-col items-center text-base">
                <span>返回主页</span>
              </div>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}