"use client";
import { UserInfoRep, UserVipInfo, Wallet } from "@/api/user";
import { Link, useRouter } from "@/i18n";
import { percentage } from "@/utils/methods";
import { ProgressBar, Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { Fragment, useState } from "react";
import MaskCom from "./component/MaskCom";

const vipImages = [
    { leve: 1, src: "/vip/1.png", color: "#686868" },
    { leve: 2, src: "/vip/2-3-4.png", color: "#844C4F" },
    { leve: 3, src: "/vip/2-3-4.png", color: "#844C4F" },
    { leve: 4, src: "/vip/2-3-4.png", color: "#844C4F" },
    { leve: 5, src: "/vip/5-6-7.png", color: "#707386" },
    { leve: 6, src: "/vip/5-6-7.png", color: "#707386" },
    { leve: 7, src: "/vip/5-6-7.png", color: "#707386" },
    { leve: 8, src: "/vip/8-9-10.png", color: "#894622" },
    { leve: 9, src: "/vip/8-9-10.png", color: "#894622" },
    { leve: 10, src: "/vip/8-9-10.png", color: "#894622" },
];

type Props = {
    userInfo: UserInfoRep;
    userMoney: Wallet;
    userVip: UserVipInfo;
};
const VipCard = (props: { userVip: UserVipInfo }) => {
    const { userVip } = props;
    const t = useTranslations("ProfilePage");

    // Vip 图标
    const vipIconElement = vipImages.map((item, index) => {
        if (item.leve === userVip.vip_level) {
            return (
                <Fragment key={index}>
                    <Image src={item.src} alt={"vip"} height={110} width={100} />
                    <span className={"icon-level"} style={{ color: item.color }}>
                        {item.leve}
                    </span>
                </Fragment>
            );
        }
    });
    return (
        <div className={"vip-card"}>
            <div className={"vip-card__icon"}>{vipIconElement}</div>
            <div className={"vip-card-process"}>
                {/*<div className={"process-top"}>{userVip.vip_exp}xp</div>*/}
                <div>
                    <ProgressBar
                        percent={percentage(userVip.vip_exp, userVip.vip_score_exp)}
                        style={{
                            "--fill-color": "#fb8b05",
                            "--track-width": "0.0694rem",
                        }}
                    />
                </div>
                <div className={"process-bottom"}>
                    <span>VIP{userVip.vip_level}</span>
                    <span className={"process-bottom-desc"}>
                        {t("expTips", {
                            exp: userVip.vip_score_exp - userVip.vip_exp,
                        })}
                    </span>
                    <span>
                        VIP
                        {userVip.vip_next_level}
                    </span>
                </div>
            </div>
        </div>
    );
};

const WalletCard = (props: { userMoney: Wallet }) => {
    const { userMoney } = props;
    const t = useTranslations("ProfilePage");
    const [visible, setVisible] = useState(false);
    const router = useRouter();

    const callbackFun = () => {
        setVisible(!visible);
    };

    const walletHandler = (key: string) => {
        router.push("/wallet");
    };
    return (
        <>
            <MaskCom visible={visible} callbackFun={callbackFun} />
            <div className="coin">
                <span className="coin_left__icon iconfont icon-icon-wallet"></span>
                <div className={"coin_right_wallet"}>
                    <div className={"wallet_left_border"}>
                        <span>{t("Saldo")}</span>
                        <div className="num">
                            <span className="uppercase">brl </span>
                            <span>{userMoney.Score || 0.0}</span>
                        </div>
                    </div>
                    <div className={"wallet_right_content"}>
                        <div className={"wallet_header"}>
                            {t("bonus")}
                            <Image
                                className="wallet_header__icon"
                                src="/img/a.png"
                                alt="question"
                                onClick={() => setVisible(true)}
                                width={15}
                                height={15}
                            />
                        </div>
                        <div className="num">
                            <span className="uppercase">brl </span>
                            <span>{userMoney.point || 0.0}</span>
                        </div>
                    </div>
                    {/*<div className={"wallet_left_border"} onClick={() => walletHandler("free")}>*/}
                    {/*    <div className={"wallet_header"}>*/}
                    {/*        {t("free")}*/}
                    {/*        <Image*/}
                    {/*            className="wallet_header__icon"*/}
                    {/*            src="/img/a.png"*/}
                    {/*            alt="question"*/}
                    {/*            width={15}*/}
                    {/*            height={15}*/}
                    {/*            onClick={(event) => {*/}
                    {/*                event.stopPropagation();*/}
                    {/*                setVisible(true);*/}
                    {/*            }}*/}
                    {/*        />*/}
                    {/*    </div>*/}
                    {/*    <div className="num">*/}
                    {/*        <span className="uppercase">brl </span>*/}
                    {/*        <span>{userMoney.point || 0.0}</span>*/}
                    {/*    </div>*/}
                    {/*</div>*/}
                    {/*<div className={"wallet_right_content"} onClick={() => walletHandler("replay")}>*/}
                    {/*    <div className={"wallet_header"}>*/}
                    {/*        {t("replay")}*/}
                    {/*        <Image*/}
                    {/*            className="wallet_header__icon"*/}
                    {/*            src="/img/a.png"*/}
                    {/*            alt="question"*/}
                    {/*            onClick={(event) => {*/}
                    {/*                event.stopPropagation();*/}
                    {/*                setVisible(true);*/}
                    {/*            }}*/}
                    {/*            width={15}*/}
                    {/*            height={15}*/}
                    {/*        />*/}
                    {/*    </div>*/}
                    {/*    <div className="num">*/}
                    {/*        <span className="uppercase">brl </span>*/}
                    {/*        <span>{userMoney.point || 0.0}</span>*/}
                    {/*    </div>*/}
                    {/*</div>*/}
                </div>
            </div>
        </>
    );
};
export const ProfileHeader = (props: Props) => {
    const { userInfo, userMoney, userVip } = props;
    const t = useTranslations("ProfilePage");

    const router = useRouter();
    const handler = () => {
        if (!!userMoney.Score) {
            router.push("/withdraw");
        } else {
            Toast.show("no monry");
        }
    };
    return (
        <>
            <div className={"userContent"}>
                <div className={"userInfo"}>
                    <div>
                        <div className={"bgImg"}></div>
                        <div>
                            <span>{t("Conta")}</span>
                            <span className="phone">{userInfo?.user_phone || ""}</span>
                        </div>
                    </div>

                    <Link
                        className="goto iconfont icon-xiangzuo1"
                        href={`/confirmPassword?userPhone=${userInfo.user_phone}&code=123456&alter=true`}
                    ></Link>
                </div>
                {/*vipcard*/}
                <VipCard userVip={userVip} />

                <WalletCard userMoney={userMoney} />
            </div>

            <div className="link">
                <Link href={"/deposit"} className={"btn"}>
                    {t("Depósito")}
                </Link>

                <p className={"btn"} onClick={handler}>
                    {t("Sacar")}
                </p>
            </div>
        </>
    );
};
