"use client";

import React, { useEffect, useRef, useState } from "react";
import { Image, Divider } 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";
export default function Wallet() {
  const router = useRouter();
  const [visible, setVisible] = useState(false);
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {}, []);
  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">
          <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="/images/icon_goldcoin.png"
              placeholder=""
              width={48}
              height={48}
            />
            <p className="text-2xl font-semibold text-white">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="/images/icon_diamond.png"
              placeholder=""
              width={48}
              height={48}
            />
            <p className="text-2xl font-semibold text-white">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
              // onPress={() =>
              //   navigation.navigate("WebWithHeader", {
              //     title: "充值中心",
              //     uri: process.env.EXPO_PUBLIC_WEB_URL + "/pay",
              //   })
              // }
              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
              // onPress={() =>
              //   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
              // onPress={() =>
              //   Linking.openURL(
              //     `${process.env.EXPO_PUBLIC_WEB_URL}/withdrawal?mid=${data?.mid}&mobile_phone=${tokenAndMobilePhone?.mobile_phone}&token=${tokenAndMobilePhone?.token}`
              //   )
              // }
              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>
  );
}