"use client";

import React, { useEffect, useState } from "react";
import { Image, Divider, Toast } from "antd-mobile";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
  faAngleRight,
  faWallet,
  faPrint,
  faDollar,
} from "@fortawesome/free-solid-svg-icons";
import baseRequest from "@/utils/baseRequest";
import { get, save } from "@/utils/storeInfo";
import requireAPI from "@/utils/requireAPI";
export default function Wallet() {
  const tokenCache = get("token");
  const temToken = encodeURIComponent(tokenCache);
  const mobilePhone = get("mobile_phone");
  const base = baseRequest();
  const router = useRouter();
  const [data, setData] = useState("");
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    getData();
  }, []);
  const getData = async () => {
    try {
      //获取账号基本信息
      const _data = await requireAPI(
        "POST",
        "/api/account/list_by_mid",
        null,
        true
      );
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
          content: _data.msg,
          position: "top",
        });
        return;
      }
      save("account", _data?.data.account);
      setData(_data?.data.account);
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <div className="">
      <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 float-left absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.push("/my");
            }}
          />
        </div>
        <p className="text-base text-center leading-9">我的钱包</p>
      </div>
      {/* 内容 */}
      <div className="p-4 pt-24 bg-gradient-to-b from-[#FF669E] to-[#07050A]">
        <div className="flex flex-row justify-around mt-2 w-full">
          <div className="flex flex-col items-center w-1/4">
            <Image
              src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/icon_goldcoin.png"}
              placeholder=""
              width={48}
              height={48}
            />
            <p className="text-2xl font-semibold text-white">
              {data?.gold_num || 0}
            </p>
            <p className="text-sm text-white">金币</p>
          </div>
          <Divider
            direction="vertical"
            style={{ height: "99px", borderColor: "#fff" }}
          />
          <div className="flex flex-col items-center w-1/4">
            <Image
              src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/icon_diamond.png"}
              placeholder=""
              width={48}
              height={48}
            />
            <p className="text-2xl font-semibold text-white">
              {data?.diamond_num || 0}
            </p>
            <p className="text-sm text-white">钻石</p>
          </div>
        </div>
        <div className="relative px-4">
          <div className="absolute top-8 left-0 w-full rounded-2xl px-4 bg-[#13121F]">
            <div
              onClick={() =>
                // navigation.navigate("WebWithHeader", {
                //   title: "充值中心",
                //   uri: process.env.EXPO_PUBLIC_WEB_URL + "/pay",
                // })
                {
                  // console.log("base,base", base);
                  router.push(
                    `/webView/${encodeURIComponent(
                      `/pay?base=${encodeURIComponent(JSON.stringify(base))}`
                    )}`
                  );
                }
              }
              className="flex justify-between items-center py-4 w-full"
            >
              <div className="flex-row items-center">
                <FontAwesomeIcon
                  icon={faWallet}
                  size="xl"
                  color="red"
                  className="w-[28px]"
                />
                <span className="text-base text-white font-medium ml-2">
                  充值
                </span>
              </div>
              <FontAwesomeIcon icon={faAngleRight} size="xl" />
            </div>
            <div
              // onClick={() =>
              //   navigation.navigate("WebWithHeader", {
              //     title: "收支明细",
              //     uri: process.env.EXPO_PUBLIC_WEB_URL + "/bill/recharge",
              //   })
              // }

              onClick={() => {
                router.push("/bill/recharge");
              }}
              className="flex justify-between items-center py-4"
            >
              <div className="flex-row items-center">
                <FontAwesomeIcon
                  icon={faPrint}
                  size="xl"
                  color="#60a5fa"
                  className="w-[28px]"
                />
                <span className="text-base text-white font-medium ml-2">
                  收支明细
                </span>
              </div>
              <FontAwesomeIcon icon={faAngleRight} size="xl" />
            </div>
            <div
              onClick={() =>
                window &&
                window.open(
                  `${process.env.NEXT_PUBLIC_WEB_URL}/withdrawal?mid=${data?.mid}&mobile_phone=${mobilePhone}&token=${temToken}`
                )
              }
              className="flex justify-between items-center py-4"
            >
              <div className="flex-row items-center">
                <FontAwesomeIcon
                  icon={faDollar}
                  size="xl"
                  color="#fb923c"
                  className="w-[28px]"
                />
                <span className="text-base text-white font-medium ml-2">
                  提现
                </span>
              </div>
              <FontAwesomeIcon icon={faAngleRight} size="xl" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}