"use client";

import React, { useEffect, useState } from "react";
import { Image, Mask, Toast, Input, TextArea } from "antd-mobile";
import require from "@/utils/require";
import { get } from "@/utils/storeInfo";
import { useRouter } from "next/navigation";
import {getStreamerDetailInfo} from "@/api/space"
export default function AddWeChat({
  visible,
  closeMask,
  name,
  price,
  streamerMid,
  avatar,
  streamerData,
}) {
  const [isMoneyEnough, setIsMoneyEnough] = useState(true);
  const [streamerDetailData, setStreamerDetailData] = useState(null);
  const router = useRouter();
  useEffect(()=>{
    if(!streamerMid)return;
    getStreamerDetailInfo(streamerMid).then(res=>{
      setStreamerDetailData(res)
    })
  },[])
  //点击解锁微信按钮
  const unlockWechat = async () => {
    //余额不够就显示余额不足前往充值，够就直接购买

    //先支付，支付成功后添加解锁关系，再展示解锁界面
    //支付金币解锁微信
    const account = get("account");
    if (account) {
      try {
        const userResponse = await require("POST", "/api/account/list_by_mid", {
          body: {
            mid: account.mid,
          },
        });
        if (userResponse.ret === -1) {
          Toast.show({
            icon: "fail",
            content: data.msg,
            position: "top",
          });
          return;
        }
        if (userResponse?.data.account?.gold_num >= price) {
          console.log("余额足够");
          const data = await require("POST", "/api/vas/one_step_unlock", {
            body: {
              contact_product_id: "contact_wechat",
              uid: streamerMid,
            },
          });
          if (data.ret === -1) {
            Toast.show({
              icon: "fail",
              content: data.msg,
              position: "top",
            });
            return;
          }
          //展示解锁界面
          // setIsWechatUnlocked(true);
        } else {
          setIsMoneyEnough(false);
        }
      } catch (error) {
        console.error(error);
      }
    }
  };

  return (
    <Mask visible={visible}>
      <div className="relative w-screen h-screen">
        <div className="w-full h-full" onClick={() => closeMask(false)}></div>
        <div className="absolute top-1/2 left-1/2 -ml-[35vw] -mt-[35vw] w-[70vw] h-max flex flex-col justify-center items-center p-4 pt-10 bg-[#261e30] rounded-2xl">
          {isMoneyEnough ? (
            <>
              <Image
                src={avatar}
                width={64}
                height={64}
                className="rounded-full absolute -top-8"
              />
              <p className="text-2xl font-bold">{name}</p>
              <div className="mt-2">
                <div>
                  {streamerData?.streamer_ext?.wechat_lock_type === 0 ? (
                    <div>
                      <div className="my-2 bg-[#FFFFFF1A] px-4 py-2 rounded-lg text-base text-center">
                        解锁后展示
                      </div>
                      <p className="text-[red] text-center mb-2">
                        添加时请备注自己“铁粉空间”昵称
                        <br />
                        若解锁后72小时为通过好友，请联系客服
                      </p>
                    </div>
                  ) : (
                    <div>
                      <div>
                        <p>
                          <span className="text-[#F53030]">*</span>
                          您的微信
                        </p>
                        <div className="text-white text-sm border border-[#2c2b2f] rounded-xl p-2 my-1 w-full">
                          <Input placeholder="填写您的微信，以便Ta主动联系您" style={{"--font-size":"small"}}/>
                        </div>
                      </div>
                      <div className="mt-2">
                        <p>备注</p>
                        <div className="text-white border border-[#2c2b2f] rounded-xl p-2 my-1 w-full">
                          <TextArea placeholder="如添加好友需填写验证信息，请将相应答案填写在此处"  style={{"--font-size":"small"}}/>
                        </div>
                      </div>
                      <p className="text-xs text-[#F53030] font-medium my-2">
                        若解锁后72小时未通过好友，请联系客服
                      </p>
                    </div>
                  )}

                  <div
                    className="bg-primary px-4 py-2 rounded-full flex items-center justify-center"
                    onClick={unlockWechat}
                  >
                    {!streamerDetailData?.is_unlock_wechat&&<span className="text-[16px]">
                      解锁微信（{streamerDetailData?.streamer_ext?.wechat_coin_price}
                      金币）
                    </span>}
                    {streamerDetailData?.is_unlock_wechat === 1 && (
                      <span className="text-[16px]">
                        提交并支付（
                        {streamerDetailData?.streamer_ext?.wechat_coin_price}金币）
                      </span>
                    )}
                    {streamerDetailData?.wechat_order_status === 2 && (
                      <span className="text-white text-base font-medium px-4">
                        提交微信
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              <p className="text-2xl text-white font-medium mb-4">余额不足</p>
              <div
                onClick={() => {
                  router.push("/my/wallet");
                  closeMask(false);
                  setIsMoneyEnough(true);
                }}
                className="px-4 py-2 bg-[#FF669E] rounded-full items-center justify-center"
              >
                <span className="text-white text-base">前往充值</span>
              </div>
            </>
          )}
        </div>
      </div>
    </Mask>
  );
}