import { ROUTE_PATH } from '@constants/routes';
import styles from './styles.module.scss';
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import { localStorageSet } from '@utils/helpers';
import { useEffect, useState } from 'react';
var lastHistory;
const WHistoryNav = () => {
    const navigate = useNavigate();
    const location = useLocation();

    const changePage = (route) => {
        lastHistory = route;
        navigate(route);
    }

    const onDepositClick = () => {
        changePage(ROUTE_PATH.DEPOSIT_HISTORY);
    }

    const onWithdrawClick = () => {
        changePage(ROUTE_PATH.WITHDRAW_HISTORY);
    }
    useEffect(() => {
        if (location.pathname.endsWith(ROUTE_PATH.HISTORY)) {
            if (!lastHistory) lastHistory = ROUTE_PATH.DEPOSIT_HISTORY;
            changePage(lastHistory)
        }
    }, [location.pathname])

    return (
        <div className={`${styles.page_header} page-top`}>
            <div className={`${styles.nav_box} `}>
                <button onClick={onDepositClick} className={`${styles.nav_node_1}  ${window.location.pathname == ROUTE_PATH.DEPOSIT_HISTORY ? styles.nav_cur : ""}`}>
                    Deposit
                </button>

                <button onClick={onWithdrawClick} className={`${styles.nav_node_2}  ${window.location.pathname == ROUTE_PATH.WITHDRAW_HISTORY ? styles.nav_cur : ""}`}>
                    Withdraw
                </button>
            </div>
        </div>

    )
}

export default WHistoryNav;