import { getUserMoneyApi } from "@/api/user";
import { Link } from "@/i18n";
import { useUserInfoStore } from "@/stores/useUserInfoStore";
import { useWalletStore } from "@/stores/useWalletStore";
import { getToken } from "@/utils/Cookies";
import { useRequest } from "ahooks";
import { useTranslations } from "next-intl";
import styles from "./style.module.scss";

const HeaderRight = () => {
    const t = useTranslations("Header");
    const { userInfo } = useUserInfoStore();
    const token = getToken();
    const score = useWalletStore((state) => state.score);
    const setScore = useWalletStore((state) => state.setScore);
    const getUserMoneyHandler = () => {
        if (token) {
            return getUserMoneyApi();
        }
        return Promise.reject();
    };

    useRequest(getUserMoneyHandler, {
        pollingInterval: 3000,
        pollingWhenHidden: true,
        pollingErrorRetryCount: 3,
        staleTime: 5000,
        refreshDeps: [token],
        onError: (error) => {},
        onSuccess: (res) => {
            if (res.data.Score) {
                setScore(res.data.Score);
            }
        },
    });
    return (
        <div className={styles.headerRight}>
            <div className={styles.right}>
                {userInfo ? (
                    <>
                        <Link href={"/profile"}>
                            <div className={"flex items-center text-[0.12rem]"}>
                                <i className={"iconfont icon-yonghu mr-[0.03rem]"}></i>
                                <span>{score}</span>
                            </div>
                        </Link>

                        <Link href={"/deposit"} className={styles.rightActive}>
                            {t("deposit")}
                        </Link>
                    </>
                ) : (
                    <>
                        <Link href={"/login?redirect=/"}>{t("login")}</Link>
                        <Link href={"/register?redirect=/"} className={styles.rightActive}>
                            {t("register")}
                        </Link>
                    </>
                )}
            </div>
        </div>
    );
};

export default HeaderRight;
