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

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

// hooks
import React, { useState } from 'react';
import useStoreRoute from '@hooks/useStoreRoute';
import { useShopProvider } from '@contexts/shopContext';
import symbol_m from "@assets/symbol-mobile.svg";
import symbol from "@assets/symbol-defs.svg";
import { ReactComponent as TabGift } from '@assets/tabicon/gift.svg';
import { ReactComponent as TabWithdraw } from '@assets/tabicon/withdraw.svg';
import { ReactComponent as TabPay } from '@assets/tabicon/pay.svg';
import shopIcon from '@assets/tabicon/deposit.png';
import { ReactComponent as TabMessage } from '@assets/tabicon/message.svg';
import { ReactComponent as TabSett } from '@assets/tabicon/sett.svg';
import { ROUTE_PATH } from "@constants/routes";
import { useSelector } from "react-redux";
import { getMailNew } from "@features/mailSlice";
import { checkIsStandalone } from "@utils/helpers";
import { useThemeProvider } from "@contexts/themeContext";
import { APP_THEME } from "@constants/app";
const i18n = global.i18n;

const BottomNav = () => {
    const [searchPopupOpen, setSearchPopupOpen] = useState(false);
    const [settingsPopupOpen, setSettingsPopupOpen] = useState(false);
    const isStoreRoute = useStoreRoute();
    const { setCartOpen } = useShopProvider();
    const mailNew = useSelector(getMailNew);
    const isStandalone = checkIsStandalone();
    const { theme } = useThemeProvider();





    // return (
    //     <div className={styles.container}>
    //         <NavLink className={styles.button} to="/settings" aria-label="Account">
    //             <svg className={"icon"}>
    //                 <use xlinkHref={`${symbol_m}#icon_More`} />
    //             </svg>
    //             <span>sdfasdf</span>
    //         </NavLink>
    //         <NavLink className={styles.button} to="/" aria-label="Home">
    //             <i className="icon-house"/>
    //         </NavLink>
    //         {
    //             isStoreRoute && (
    //                 <button className={styles.button} aria-label="Shopping cart" onClick={() => setCartOpen(true)}>
    //                     <i className="icon-cart"/>
    //                 </button>
    //             )
    //         }
    //         <button className={styles.button}
    //                 aria-label="Search"
    //                 onClick={() => setSearchPopupOpen(true)}>
    //             <i className="icon-search"/>
    //         </button>
    //         <button className={styles.button}
    //                 aria-label="Settings"
    //                 onClick={() => setSettingsPopupOpen(true)}>
    //             <i className="icon-gear-regular"/>
    //         </button>
    //         <SearchPopup open={searchPopupOpen} onClose={setSearchPopupOpen}/>
    //         <SettingsPopup open={settingsPopupOpen} onClose={() => setSettingsPopupOpen(false)}/>
    //     </div>
    // )
    const getSymbol = () => {
        let symbols = ['$', '€', '₽', 'M$', 'R$'];
        let dollar = global.DOLLAR;
        if (symbols.indexOf(dollar) === -1) dollar = symbols[0];
        return dollar;
    };
    const getLang = () => {
        let langs = ['en', 'pt', 'es', 'ru'];
        let lang = i18n.language;
        if (langs.indexOf(lang) === -1) lang = langs[0];
        return lang;
    };

    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;
        }
    }
    return (
        // <div className={`${styles.container} ${isStandalone?styles.container_full:''}`}>
        //     <svg aria-hidden="true" focusable="false" style={{width:0,height:0,position:"absolute"}}>
        //         <linearGradient id="gradient-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
        //             <stop offset="0%" stopColor="#fffee7"/>
        //             <stop offset="50%" stopColor="#e4f6ee"/>
        //             <stop offset="100%" stopColor="#d6fede"/>
        //         </linearGradient>
        //         <linearGradient id="gradient-vertical-dark" x1="0%" y1="0%" x2="0%" y2="100%">
        //             <stop offset="0%" stopColor="#807f74"/>
        //             <stop offset="50%" stopColor="#757c77" />
        //             <stop offset="100%" stopColor="#386b42" />
        //         </linearGradient>
        //     </svg>
        //     <NavLink className={styles.button} to={ROUTE_PATH.PROMOTION}>
        //         {/*<svg className={"icon"}>*/}
        //         {/*    <use xlinkHref={`${ticon_gift}#gift`} />*/}
        //         {/*</svg>*/}
        //         {/*<TabGift className={styles.icon}/>*/}
        //         <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
        //             <use xlinkHref={`${symbol}#icon_Giftbox`}/>
        //         </svg>
        //         <span className={styles.bottomtxt}>{i18n.t("tab.promotion")}</span>
        //     </NavLink>
        //     <NavLink className={styles.button} to={ROUTE_PATH.SAQUE} aria-label="Home">
        //         {/*<svg className={"icon"}>*/}
        //         {/* <use xlinkHref={`${symbol_m}#icon_Home_1`} />*/}
        //         {/*</svg>*/}
        //         {/*<TabWithdraw className={styles.icon}/>*/}
        //         <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
        //             <use xlinkHref={`${symbol}#icon_WithDraw`}/>
        //         </svg>
        //         <span className={styles.bottomtxt}>{i18n.t("tab.withdraw")}</span>
        //     </NavLink>
        //     <NavLink className={styles.button} style={{width:"25%"}} to={ROUTE_PATH.PAY}>
        //         <div className={styles.deposit_icon}>
        //             <img className={styles.d_img} src={require(`@assets/tabicon/deposit_${getLang()}.png`)}/>
        //             <img className={styles.c_img} src={require(`@assets/tabicon/coin_${getSymbol()}.png`)}/>
        //         </div>

        //         <span className={`${styles.yellow_txt} ${styles.bottomtxt}`}
        //               style={{lineHeight: "1.5rem"}}>{i18n.t("tab.deposit")}</span>
        //     </NavLink>
        //     <NavLink className={styles.button} to={ROUTE_PATH.MESSAGE}>
        //         {
        //             mailNew > 0 ? (
        //                 <div className={styles["dont-badge"]}>
        //                     <p>
        //                         {
        //                             mailNew>=100?"...":mailNew
        //                         }
        //                     </p>
        //                 </div>
        //             ) : (<></>)
        //         }
        //         {/*<svg className={"icon"}>*/}
        //         {/*    <use xlinkHref={`${symbol_m}#icon_Account`} />*/}
        //         {/*</svg>*/}
        //         {/*<TabMessage className={styles.icon}/>*/}
        //         <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
        //             <use xlinkHref={`${symbol}#icon_Mail`}/>
        //         </svg>
        //         <span className={styles.bottomtxt}>{i18n.t("tab.message")}</span>
        //     </NavLink>
        //     <NavLink className={styles.button} to={ROUTE_PATH.CUSTOMER}>
        //         {/*<svg className={"icon"}>*/}
        //         {/*    <use xlinkHref={`${symbol}#icon_Chat`} />*/}
        //         {/*</svg>*/}
        //         {/*<TabSett className={styles.icon}></TabSett>*/}
        //         <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
        //             <use xlinkHref={`${symbol}#icon_Support`}/>
        //         </svg>
        //         <span className={styles.bottomtxt}>{i18n.t("tab.service")}</span>
        //     </NavLink>
        // </div>

        <div className={`${styles.container} ${isStandalone ? styles.container_full : ''}`}>
            {/* <svg aria-hidden="true" focusable="false" style={{ width: 0, height: 0, position: "absolute" }}>
                <linearGradient id="gradient-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stopColor="#fffee7" />
                    <stop offset="50%" stopColor="#e4f6ee" />
                    <stop offset="100%" stopColor="#d6fede" />
                </linearGradient>
                <linearGradient id="gradient-vertical-dark" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stopColor="#807f74" />
                    <stop offset="50%" stopColor="#757c77" />
                    <stop offset="100%" stopColor="#386b42" />
                </linearGradient>
            </svg> */}
            <NavLink className={`${styles.button}  ${isDeposit() ? styles.curNav : ""}`} to={ROUTE_PATH.DEPOSIT}>
                <svg className={`${styles.bottomicon}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Deposit`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.deposit")}</span>
            </NavLink>
            <NavLink className={`${styles.button}  ${window.location.pathname == ROUTE_PATH.PROMOTION ? styles.curNav : ""}`} 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>
            </NavLink>
            <NavLink className={`${styles.button}  ${window.location.pathname == ROUTE_PATH.HOME ? styles.curNav : ""}`} 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={`${styles.button}  ${window.location.pathname == ROUTE_PATH.SHARE ? styles.curNav : ""}`} to={ROUTE_PATH.SHARE}>
                {/* {
                    mailNew > 0 ? (
                        <div className={styles["dont-badge"]}>
                            <p>
                                {
                                    mailNew >= 100 ? "..." : mailNew
                                }
                            </p>
                        </div>
                    ) : (<></>)
                } */}
                <svg className={`${styles.bottomicon} ${theme === APP_THEME.LIGHT ? styles.bottomicon_light : ''}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Share`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.share")}</span>
            </NavLink>
            <NavLink className={`${styles.button}  ${window.location.pathname == ROUTE_PATH.BONUS ? styles.curNav : ""}`} to={ROUTE_PATH.BONUS}>
                <svg className={`${styles.bottomicon} ${theme === APP_THEME.LIGHT ? styles.bottomicon_light : ''}`}>
                    <use xlinkHref={`${symbol}#TabIcon_Bonus`} />
                </svg>
                <span className={styles.bottomtxt}>{i18n.t("tab.bonus")}</span>
            </NavLink>
        </div>
    );
};

export default BottomNav;
