import styles from './styles.module.scss';
import bg_1 from "@assets/gameroom/room_deact.png";
import bg_2 from "@assets/gameroom/room_act.png";
import bg_3 from "@assets/gameroom/room_deact.png";
import {animated, useSpring} from '@react-spring/web';
import CSSTransition from "react-transition-group/CSSTransition";
import React, {cloneElement, useEffect, useRef, useState} from "react";
import TransitionGroup from "react-transition-group/TransitionGroup";
import {useNavigate} from "react-router-dom";
import {formatCash, localStorageSet} from "@utils/helpers";
import {LOCAL_GAME_INFO, LOCAL_GAME_URL} from "@constants/localkey";
import {ROUTE_PATH} from "@constants/routes";
import styled from 'styled-components/macro';
import Button from "@mui/material/Button";
import Popup from "@components/Popup";
import {useSpringRef} from "@react-spring/core";
import {updateGameCardInfo} from "@features/mainSlice";
import {useDispatch} from "react-redux";
const gameBgs=[null,bg_1,bg_2,bg_3,bg_2];
const fontColors=["","#bc9350","#208e3c","#bc9350","#208e3c"];
const i18n=global.i18n;
const StyledRoomButton = styled.button`
    ${(props) => {
        return `
           background:url(${props.background});
           color:${props.color};
        `
    }}
`
const GameRoom = ({open,data,height="5rem",mobile=false,user,onClose,...props}) => {
    const timeout=200;
    const [show,setShow]=useState(open);
    const navigate=useNavigate();
    let fromStyle={opacity: 0, transform: 'scaleY(0)'};
    let toStyle={opacity: 1, transform: 'scaleY(1)'};
    let openAni=useSpring({
            from: fromStyle,
            to: toStyle,
            config: {duration: timeout},
        })
    let closeAni=useSpring({
        from: toStyle,
        to: fromStyle,
        config: {duration: timeout},
    })
    const conRef=useRef();
    // const [cstyle,setCstyle]=useState(null)
    const dispatch=useDispatch();
    useEffect(()=>{
       return ()=>{

       };
    },[])
    const lackCash=()=>{
        let onSure=()=>{
            navigate(ROUTE_PATH.PAY);
        }
        let data={
            content:i18n.t("lackMoney.lackMoney_Label"),
            sureLabel:i18n.t("lackMoney.sure_label"),
            sureCB:onSure,
        }
        global.msgBoxShow(data)
    }
    const saveGameInfo=(item)=>{
        let info={
            data:item
        }
        localStorageSet(LOCAL_GAME_INFO+item.id,JSON.stringify(info));
    }
    const handleGame=(item)=>{
        if (checkLack(item)){
            lackCash();
            return;
        }
        let id=data.id;
        let url=data.link;
        if (url.indexOf("?"))url+=("&level="+item.type);
        else url+=("?level="+item.type);
        localStorageSet(LOCAL_GAME_URL+id,item.type);
        // saveGameInfo(data);
        dispatch(updateGameCardInfo({
            data:data,
            level:item.type
        }))
        let path=ROUTE_PATH.GAME+"/"+id;
        global.authLockPath=path;
        navigate(path);
    }
    const checkLack=(item)=>{
        // if (user){
        //     let golds=Number(user.Score)*global.CASH_BASE;
        //     let limit=Number(item.value);
        //     if (golds<limit){
        //         return true;
        //     }
        // }
        return false;
    }
    const renderMobile=()=>{
        if (data==null)return (<></>);
        let level_info=data.level_info;
        if (level_info==null)return (<></>);
        let list=[];
        for (const key in level_info) {
            list.push({type:key,value:level_info[key]});
        }
        let cstyle={}
        if (show)cstyle=openAni;
        else cstyle=closeAni;
        return (
            <animated.div ref={conRef} className={styles.cotiner_m} style={cstyle}>
                <div className={styles.room_con}>
                    {
                        list.map((item, index) => {
                            let isLack=checkLack(item);
                            let color=isLack?fontColors[1]:fontColors[2];
                            let background=isLack?gameBgs[1]:gameBgs[2];
                            return (
                                <StyledRoomButton color={color} background={background} key={index} className={styles.room_item} style={{height: height}} onClick={(e)=>{
                                    e.stopPropagation();
                                    handleGame(item);
                                }}>
                                    <div className={styles.title_con}>
                                        {i18n.t("gameRoom.title_"+item.type)}
                                    </div>
                                    <div className={styles.limit_con}>
                                        {global.DOLLAR+" "+formatCash(item.value,0)}
                                    </div>
                                </StyledRoomButton>
                            )
                        })
                    }
                </div>
            </animated.div>
        )
    }
    const renderDesktop = () => {
        if (data==null)return (<></>);
        let level_info=data.level_info;
        if (level_info==null)return (<></>);
        let list=[];
        for (const key in level_info) {
            list.push({type:key,value:level_info[key]});
        }
        return (
            <Popup onClose={() => {
                if (onClose) onClose();
            }} open={open} popupClass={"popup-big"}>
                <div className={styles.cotiner}>
                    <div className={styles.title}>{i18n.t("gameRoom.slect_title")}</div>
                    <div className={styles.room_con}>
                        {
                            list.map((item, index) => {
                                let isLack=checkLack(item);
                                let color=isLack?fontColors[1]:fontColors[2];
                                let background=isLack?gameBgs[1]:gameBgs[2];
                                return (
                                    <StyledRoomButton color={color} background={background} key={index} className={`${styles.room_item} ${styles.room_item_desk}`} onClick={(e)=>{
                                        e.stopPropagation();
                                        handleGame(item);
                                    }}>
                                        <div className={styles.title_con}>
                                            {i18n.t("gameRoom.title_"+item.type)}
                                        </div>
                                        <div className={`${styles.limit_con} ${styles.limit_con_desk}`}>
                                            {global.DOLLAR+" "+formatCash(item.value,0)}
                                        </div>
                                    </StyledRoomButton>
                                )
                            })
                        }
                    </div>
                </div>
            </Popup>
        )
    }
    const renderContainer = () => {
        if (mobile) return renderMobile();
        else return renderDesktop();
    }
    return (
        <>
            {renderContainer()}
        </>
    )
}
export default GameRoom;