site_8g/src/components/ModalPopup/WalletDescribeModal/index.tsx

import { cleanBounsApi, toggleUserBounsApi } from "@/api/user";
import { usePollingStore } from "@/stores/usePollingStore";
import { useWalletStore } from "@/stores/useWalletStore";
import { percentage } from "@/utils/methods";
import { Dialog, ProgressBar, Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import React from "react";
import { shallow } from "zustand/shallow";
import "./style.scss";

const Progress = ({ percent, textColor = "#fff" }: { percent: number; textColor?: string }) => {
    return (
        <div className="flex">
            <ProgressBar
                percent={percent}
                className={"mr-[0.0694rem] flex-1"}
                style={{
                    "--fill-color": "#00f6ff",
                    "--track-color": "#94a2dc",
                    "--track-width": "0.0694rem",
                }}
            />
            <span className={"text-[#fff]"}>{percent.toFixed(2)}%</span>
        </div>
    );
};
export const WalletContent = ({
    percentage,
    type,
    difference,
    current,
    textColor = "#fff",
}: {
    percentage: number;
    type: string;
    difference: number;
    current: number;
    textColor?: string;
}) => {
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <div className={"walletContentTitle mb-[0.12rem] text-[0.12rem]"}>
                <span className={"mr-[10px]"}>{type}</span>
                <i className={"mr-[10px] indent-[10px] text-[0.1528rem] font-bold"}>R$</i>
                <span>{current}</span>
            </div>

            <Progress percent={percentage} textColor={textColor} />

            <div className={`text-[${textColor}]`}>
                <span>{t("modalBottomTips")}</span>
                <span>{difference.toFixed(2)}</span>
            </div>
        </div>
    );
};
// 现金
export const BalanceContent = () => {
    // const { wallet } = props;
    const wallet = useWalletStore((state) => {
        return {
            score: state.wallet.score,
            target_score_rollover: state.wallet.target_score_rollover,
            current_score_rollover: state.wallet.current_score_rollover,
        };
    }, shallow);
    const t = useTranslations("ProfilePage");
    return (
        <>
            <WalletContent
                difference={wallet.target_score_rollover - wallet.current_score_rollover}
                type={t("balance")}
                current={wallet.score || 0}
                percentage={percentage(wallet.current_score_rollover, wallet.target_score_rollover)}
            />
        </>
    );
};

export const BonusContent = (props: { handleAcquire?: any }) => {
    const { handleAcquire } = props;
    const { setWallet, wallet } = useWalletStore((state) => ({
        setWallet: state.setWallet,
        wallet: state.wallet,
    }));
    const [switchValue, setSwitchValue] = React.useState<boolean>(
        wallet.is_open_no_bonus === 1 || false
    );
    const refresh = usePollingStore((state) => state.refresh);
    const [isLoading, setIsLoading] = React.useState<boolean>(false);
    const t = useTranslations("ProfilePage");

    const changeValue = async (value: boolean) => {
        const confirmRes = await Dialog.confirm({
            content: (
                <div className="text-[#fff]">{value ? t("switchOpen") : t("switchClose")}</div>
            ),
            confirmText: t("sure"),
            cancelText: t("cancel"),
            bodyStyle: {
                backgroundColor: "#373737",
                color: "#fff",
            },
            bodyClassName: "customConfirm",
        });
        if (!confirmRes) return;
        setIsLoading(true);
        try {
            const res = await toggleUserBounsApi(value ? 1 : 0);
            if (!(res?.code && res?.data?.code === 0)) {
                throw new Error("error");
            }
            setSwitchValue(value);
        } finally {
            setIsLoading(false);
        }
    };

    const doHandle = async () => {
        const confirmRes = await Dialog.confirm({
            content: <div className="text-[#fff]">{t("clean")}</div>,
            confirmText: t("sure"),
            cancelText: t("cancel"),
            bodyStyle: {
                backgroundColor: "#373737",
                color: "#fff",
            },
            bodyClassName: "customConfirm",
        });
        if (!confirmRes) return;
        const res = await cleanBounsApi(1);

        if (res?.code && [6001, 6002].includes(res?.data?.code)) {
            const str = t(`bouns${res?.data?.code}`);
            Toast.show({
                content: str,
                icon: "fail",
            });
        }
        Toast.show({
            content: t("success"),
            icon: "success",
        });

        refresh && refresh();
    };

    return (
        <div>
            <WalletContent
                difference={wallet.target_point_rollover - wallet.current_point_rollover}
                type={t("bonus")}
                current={wallet.point || 0}
                percentage={percentage(wallet.current_point_rollover, wallet.target_point_rollover)}
            />
            <p className={"text-center text-[#fff]"}>{t("bonusArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal pl-[0.1rem] text-[0.12rem] text-[#fff]"}>
                <li className="mt-[.06rem]">{t("bonusDesc1")}</li>
                <li className="mt-[.06rem]">{t("bonusDesc2")}</li>
                <li className="mt-[.06rem]">{t("bonusDesc3")}</li>
            </ul>
            {/* <div className="mt-[.15rem] rounded-[8px] border-[1px] border-[#e540ff] bg-[#2f4cc8] shadow-[0_-10px_25px_#e641ff_inset]">
                <div className="flex flex-row items-center justify-between border-b-[1px] border-[#e540ff] p-[8px]">
                    <span className="text-[#fff]">{t("bounsTitle1")}</span>
                    <Switch
                        loading={isLoading}
                        style={{
                            "--checked-color": "#a195d2",
                            "--height": "24px",
                            "--width": "48px",
                        }}
                        checked={switchValue}
                        onChange={changeValue}
                    ></Switch>
                </div>
                <ul
                    className={
                        "ml-[0.1389rem] list-decimal pl-[0.1rem] pt-[.1rem] text-[0.12rem] text-[#fff]"
                    }
                >
                    <li className="mt-[.06rem]">{t("bonusDesc4")}</li>
                    <li className="mt-[.06rem]">{t("bonusDesc5")}</li>
                    <li className="mt-[.06rem]">{t("bonusDesc6")}</li>
                </ul>
                <div className="mt-[.1rem] flex items-center justify-center pb-[.2rem]">
                    <a
                        onClick={doHandle}
                        className="rounded-[20px] border-[1px] border-[#46e3ff] bg-[#4234a8] px-[.1rem] py-[.06rem] text-[#00f6ff] shadow-[0_0_25px_#435cb9_inset]"
                    >
                        {t("boundsBtn")}
                    </a>
                </div>
            </div> */}
            {handleAcquire && (
                <a
                    className={`carteira-box ${wallet.is_point_transfer ? "active" : ""}`}
                    onClick={() => handleAcquire(2, wallet.is_point_transfer)}
                >
                    <span>{t("carteira")}</span>
                </a>
            )}
        </div>
    );
};

export const FreeContent = ({
    handleAcquire,
    textColor = "#fff",
}: {
    handleAcquire?: any;
    textColor?: string;
}) => {
    // const { wallet, handleAcquire } = props;
    const t = useTranslations("ProfilePage");
    const { wallet } = useWalletStore((state) => ({
        wallet: state.wallet,
    }));
    return (
        <div>
            <WalletContent
                difference={wallet.target_free_score_rollover - wallet.current_free_score_rollover}
                type={t("free")}
                current={wallet.free_score || 0}
                percentage={percentage(
                    wallet.current_free_score_rollover,
                    wallet.target_free_score_rollover
                )}
            />
            <p className={`text-center text-[${textColor}]`}>{t("freeArticle")}</p>
            <ul
                className={`"ml-[0.1389rem] list-decimal pl-[0.1rem] text-[0.12rem] text-[${textColor}]`}
            >
                <li className="mt-[.06rem]">{t("freeDesc1")}</li>
                <li className="mt-[.06rem]">{t("freeDesc2")}</li>
                <li className="mt-[.06rem]">
                    {t("freeDesc3")}
                    {wallet?.free_transfer_ratio}:1
                </li>
                <li className="mt-[.06rem]">
                    {t("freeDesc4", { n: wallet.free_transfer_max ?? 0 })}
                </li>
            </ul>
            {handleAcquire && (
                <a
                    className={`carteira-box ${wallet.is_free_transfer && wallet.free_score >= (wallet?.free_transfer_min || 0) ? "active" : ""}`}
                    onClick={() => handleAcquire(3, wallet.is_free_transfer)}
                >
                    <span>{t("carteira")}</span>
                </a>
            )}
            <p className={`mt-[.06rem] text-center text-[0.12rem] text-[${textColor}]`}>
                Valor minimo de transferência de {wallet?.free_transfer_min}
            </p>
        </div>
    );
};
export const ReplayContent = ({
    handleAcquire,
    textColor = "#fff",
}: {
    handleAcquire?: any;
    textColor?: string;
}) => {
    const t = useTranslations("ProfilePage");
    const { wallet } = useWalletStore((state) => ({
        wallet: state.wallet,
    }));
    return (
        <div>
            <WalletContent
                difference={wallet.target_lose_score_rollover - wallet.current_lose_score_rollover}
                type={t("replay")}
                current={wallet.lose_score || 0}
                percentage={percentage(
                    wallet.current_lose_score_rollover,
                    wallet.target_lose_score_rollover
                )}
            />
            <p className={`text-center text-[${textColor}]`}>{t("replayArticle")}</p>
            <ul
                className={`ml-[0.1389rem] list-decimal pl-[0.1rem] text-[0.12rem] text-[${textColor}]`}
            >
                <li className="mt-[.06rem]">{t("replayDesc1")}</li>
                <li className="mt-[.06rem]">{t("replayDesc2")}</li>
                <li className="mt-[.06rem]">
                    {t("replayDesc3")}
                    {wallet?.lose_transfer_ratio}:1
                </li>
                <li className="mt-[.06rem]">
                    {t("replayDesc4", { n: wallet.lose_transfer_max ?? 0 })}
                </li>
            </ul>
            {handleAcquire && (
                <a
                    className={`carteira-box ${wallet.is_lose_transfer && wallet.lose_score >= (wallet?.lose_transfer_min || 0) ? "active" : ""}`}
                    onClick={() => handleAcquire(4, wallet.is_lose_transfer)}
                >
                    <span>{t("carteira")}</span>
                </a>
            )}
            <p className={`mt-[.06rem] text-center text-[0.12rem] text-[${textColor}]`}>
                Valor minimo de transferência de {wallet?.lose_transfer_min}
            </p>
        </div>
    );
};

// const WalletDescribeModal = () => {
//     const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");
//     const tipsRef = useRef<ModalProps>(null);
//     const wallet: any = {};
//     const t = useTranslations("ProfilePage");
//
//     return (
//         <TipsModal
//             ref={tipsRef}
//             title={
//                 <div className={"flex items-center"}>
//                     <i className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}></i>
//                     {t("modalTitle")}
//                 </div>
//             }
//         >
//             {/*现金*/}
//             {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={wallet} /> : null}
//             {/*  彩金*/}
//             {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={wallet} /> : null}
//             {/* 免费币 */}
//             {tipsStatus === WalletEnum.Free ? <FreeContent wallet={wallet} /> : null}
//             {/*  重玩币 */}
//             {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={wallet} /> : null}
//         </TipsModal>
//     );
// };
// export default WalletDescribeModal;