import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router";
import { ROUTE_PATH } from "@constants/routes";
import { getBonusStatus, getMyRecord, getRecord, getTurnplate } from "@features/turnplateSlice";
import React, { useEffect, useState } from "react";
import styled from 'styled-components/macro';
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, EffectCube, EffectCoverflow, Virtual } from "swiper/modules";
import { Fade, Grow, Modal } from "@mui/material";
import { getCasinoGames, getFetchStatus, getModules, getPopularGames } from "@features/pageSlice";
import { updateGameCardInfo } from "@features/mainSlice";
const i18n = global.i18n;

const WRecommendedGames = () => {
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const show = (type) => {
        setOpen(true);
    };
    const hide = () => {
        setOpen(false);
    };
    const onClose = () => {
        hide();
        // global.openNextPopup();
    };
    useEffect(() => {
        const recommendedGames = {
            show,
            hide
        };
        global.recommendedGames = recommendedGames;
    }, []);


    const modules = useSelector(getModules(1));

    const getCasinoGames = (pageData) => {
        if (!pageData || pageData.length == 0) return [];
        let index = pageData.findIndex((modules) => {
            return modules.type === "ModuleGameTabs";
        });

        if (index === -1 || !pageData[index]) return [];
        const data = pageData[index].data || [];
        const tabs = pageData[index].tabs || [];
        const tabtype = tabs.findIndex((element) => {
            return element.id === 20 || element.title === 'links.casino';
        });
        index = data.findIndex((element) => {
            return element.id === 5 || element.tabtype === tabtype;
        });

        if (index === -1 || !data[index]) return [];
        const list = data[index].data || [];
        return list;
    };

    const getRandom = (arr, nums = 6) => {
        return [...arr].sort(() => Math.random() - 0.5).slice(0, nums);
    };


    const recommendedGames = getRandom(getCasinoGames(modules));
    // console.error(recommendedGames);

    const onEnterGame = (data) => {
        let id = data.id;
        let url = data.link;
        dispatch(updateGameCardInfo({
            data: data,
            level: 0
        }));
        let path = ROUTE_PATH.GAME + "/" + id;
        global.authLockPath = path;
        navigate(path);
    };

    const handleClickGame = (item) => {
        let { id } = item;
        if (!id) return;

        setOpen(false);
        onEnterGame(item);
    };

    const handleClickMore = () => {
        setOpen(false);
        navigate("/");
    };

    return (
        <Modal open={open} closeAfterTransition >
            <Fade in={open} timeout={500}>
                <div className={`popup-container ${styles.bgc}`}>
                    <Grow in={open} timeout={0}>
                        <div className={`popup popup-window card card-padded`} style={{ minHeight: 'unset', overflow: 'unset' }}>
                            <div className={styles.container}>
                                <div className={styles.title}>RECOMMENDED GAMES</div>

                                <div className={styles.games}>
                                    {
                                        recommendedGames.map((item, index) => {
                                            return (
                                                <div className={styles.game} onClick={() => handleClickGame(item)} key={index}>
                                                    <img src={item.img} alt="" />
                                                </div>
                                            );
                                        })
                                    }
                                </div>

                            </div>
                            <div className={styles.tip}>
                                <span>Click to see </span>
                                <span className={styles.more} onClick={handleClickMore}>MORE GAMES</span>
                            </div>


                            <button className={styles.closeBtn} onClick={onClose} aria-label="Close popup">
                                <i className="icon-xmark" />
                            </button>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>

    );
};
export default WRecommendedGames;
