// styling
import styles from './styles.module.scss';

// components
import { NavLink, useLocation } from 'react-router-dom';

// hooks
import React, { useState, useEffect } from 'react';
import symbol from "@assets/symbol-defs.svg";
import { ROUTE_PATH } from "@constants/routes";
import { useSelector } from "react-redux";
import { checkIsStandalone } from "@utils/helpers";
import { useThemeProvider } from "@contexts/themeContext";
import { APP_THEME } from "@constants/app";
import { getHolidaysActInfo, getHolidaysGiftInfo } from '@features/mainSlice';

import boxHoliday from "@assets/bottomNav/boxHoliday.webp";
import iconHoliday from "@assets/bottomNav/iconHoliday.webp";
import usePaymentActions from '@hooks/usePaymentActions';
import { getTurnplate } from '@features/turnplateSlice';
const i18n = global.i18n;

const BottomNav = () => {
    const isStandalone = checkIsStandalone();
    const { theme, isShowFreeWithdraw } = useThemeProvider();
    const { getFirstPayGiftInfo } = usePaymentActions();
    const firstPayGift = getFirstPayGiftInfo();

    const isCurNav = (path) => {
        const className = `${styles.button}`;
        const curClassName = `${styles.button} ${styles.curNav}`;
        if (path == ROUTE_PATH.DEPOSIT) {
            return isDeposit() ? curClassName : className;
        } else {
            return window.location.pathname == path ? curClassName : className;
        }
    };

    const isDeposit = () => {
        switch (window.location.pathname) {
            case ROUTE_PATH.VIP:
            case ROUTE_PATH.WITHDRAW:
            case ROUTE_PATH.WITHDRAW_HISTORY:
            case ROUTE_PATH.DEPOSIT_HISTORY:
            case ROUTE_PATH.DEPOSIT: return true;
            default: return false;
        }
    };

    // promotion
    const [redPromotion, setRedPromotion] = useState(false);
    const holidaysGiftInfo = useSelector(getHolidaysGiftInfo);
    let { user: holidaysGiftUser } = holidaysGiftInfo;
    const holidaysActInfo = useSelector(getHolidaysActInfo);
    let { user: holidaysActUser } = holidaysActInfo;

    useEffect(() => {
        let tips_count = 0;
        if (holidaysGiftUser?.left_times !== undefined) {
            if (holidaysGiftUser.left_times > 0) {
                tips_count++;
            }
        }
        if (holidaysActUser?.left_times !== undefined) {
            if (holidaysActUser.left_times > 0) {
                tips_count++;
            }
        }

        if (firstPayGift.has_bonus) {
            tips_count++;
        }

        setRedPromotion(tips_count > 0);
    }, [holidaysGiftUser, firstPayGift, holidaysActUser]);


    const renderPromotionRedPoint = () => {
        return (
            redPromotion ?
                <>
                    <div className={`${styles.redPoint} ${styles.redPromotion}`}></div>
                    {
                        holidaysGiftUser?.left_times > 0 ?
                            <div className={styles.redTipHoliday}  >
                                <img src={boxHoliday} alt="" className={styles.boxHoliday} />
                                <div className={styles.tip}>
                                    <img src={iconHoliday} alt="" className={styles.iconHoliday} />
                                    <span>+{holidaysGiftUser?.left_times}</span>
                                </div>
                            </div>
                            : <></>
                    }
                </>
                : <></>
        );
    };

    // share
    const [redShare, setRedShare] = useState(false);
    const turnplate = useSelector(getTurnplate);
    let canWithdraw = turnplate?.collect_amount >= turnplate?.total_amount;
    useEffect(() => {
        if (turnplate?.times > 0 || canWithdraw) {
            setRedShare(true);
        } else {
            setRedShare(false);
        }
    }, [turnplate, canWithdraw]); // 添加依赖项
    const renderShareRedPoint = () => {
        return (
            redShare ? (<div className={`${styles.redPoint} ${styles.redShare}`}></div>) : <></>
        );
    };

    return (
        <div className={`${styles.container} ${isStandalone ? styles.container_full : ''}`}>
            <NavLink className={isCurNav(ROUTE_PATH.DEPOSIT)} to={ROUTE_PATH.DEPOSIT} onClick={() => {
                // adjust 设置充值类型
                global.enterRechargeType = 0;
            }}>
                <svg className={`${styles.bottomicon}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Deposit`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.deposit")}</span>
                {/* <div className={`${styles.redPoint} ${styles.redDeposit}`}></div> */}
            </NavLink >

            <NavLink className={isCurNav(ROUTE_PATH.PROMOTION)} to={ROUTE_PATH.PROMOTION}>
                <svg className={`${styles.bottomicon} ${theme === APP_THEME.LIGHT ? styles.bottomicon_light : ''}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Promotion`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.promotion")}</span>
                {renderPromotionRedPoint()}
            </NavLink >

            <NavLink className={isCurNav(ROUTE_PATH.HOME)} to={ROUTE_PATH.HOME}>
                <div className={styles.mainButton}>
                    <svg width={84} height={84} className={`${styles.bottomicon}  ${styles.bottomMainIcon}`}>
                        <use xlinkHref={`${symbol}#TabIcon_Play`} />
                    </svg>
                </div>
                <span className={`${styles.bottomtxt} ${styles.bottomMainTxt}`}
                    style={{ lineHeight: "1.5rem" }}>{i18n.t("tab.play")}</span>
            </NavLink>

            <NavLink className={isCurNav(ROUTE_PATH.SHARE)} to={ROUTE_PATH.SHARE}>
                <svg className={`${styles.bottomicon}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Share`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.share")}</span>
                {renderShareRedPoint()}
            </NavLink>

            <NavLink className={isCurNav(ROUTE_PATH.BONUS)} to={ROUTE_PATH.BONUS}>
                <svg className={`${styles.bottomicon}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Bonus`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.bonus")}</span>
                {/* <div className={`${styles.redPoint} ${styles.redBonus}`}></div> */}
            </NavLink>



        </div >
    );
};

export default BottomNav;
