import { useThemeProvider } from '@contexts/themeContext';
import styles from './styles.module.scss';
import { useNavigate } from 'react-router';
import { ROUTE_PATH } from '@constants/routes';
import SvgIcon from '@components/SvgIcon';
import btnBackImg from '@assets/game_back.webp';
import btnBackCloseImg from "@assets/game_back_close.webp";
import { useCallback, useEffect, useRef, useState } from 'react';
import { getPopularGames } from '@features/pageSlice';
import { useSelector } from 'react-redux';
import LazyImgix from '@components/Imgix/LazyImgix';
const WGameMenu = ({ onBack, onOpenGame }) => {
    const { openService } = useThemeProvider();
    const [openMenu, setOpenMenu] = useState(false);
    const populars = useSelector(getPopularGames);
    const [itemWidth, setItemWidth] = useState(120);
    const nodeRef = useRef(null);
    const navigate = useNavigate();

    useEffect(()=>{
        if(nodeRef.current) {
            setItemWidth(Math.floor(nodeRef.current.offsetWidth * 0.28))
        }
    },[nodeRef.current])

    // const listRef = useCallback((node) => {
    //     if (!!node) {
    //         // setItemWidth(Math.floor(node.offsetWidth * 0.28))
    //     }
    // }, []);

    const onDeposit = () => {
        navigate(ROUTE_PATH.PAY);
    }

    const onService = () => {
        openService && openService();
    }

    const onReload = () => {
        window.location.reload();
    }

    const updateView = () => {
        setOpenMenu(!openMenu);
    }

    const handleOpenGame = (data) => {
        onOpenGame(data);
        setOpenMenu(false);
    }

    return (
        <>
            <div className={styles.btnBack} onClick={updateView}>
                {
                    openMenu ? <img src={btnBackCloseImg} /> : <img src={btnBackImg} />
                }
            </div>

            {
                openMenu && <div className={styles.container}>
                    <SvgIcon onClick={updateView} className={styles.btn_close} herf={"icon_Close"} />

                    <div className={styles.menu_box}>
                        <span>MENU</span>
                        <button onClick={onBack}><SvgIcon herf={"icon_back"} /> Lobby </button>
                        <button onClick={onDeposit}><SvgIcon herf={"icon_deposit_2"} /> Deposit</button>
                        <button onClick={onService}><SvgIcon herf={"icon_service"} /> Service</button>
                        <button onClick={onReload}><SvgIcon herf={"icon_reload"} /> Reload</button>
                    </div>
                    <div className={styles.menu_line}>
                        <div className={styles.line1}></div>
                        <span>MOST POPULAR</span>
                        <div className={styles.line2}></div>
                    </div>
                    <div className={styles.game_list} ref={nodeRef}>
                        {
                            populars.map((game, index) =>
                                <div key={`gamemenu_game_${index}`} className={styles.item} onClick={() => { handleOpenGame(game) }}>
                                    <LazyImgix
                                        key={`menu_hot_game_${index}`}
                                        src={game.img}
                                        alt={"game-icon"}
                                        width={itemWidth} />
                                </div>
                            )
                        }
                    </div>
                </div>
            }

        </>
    )
}

export default WGameMenu;