import styles from "@components/GameItem/styles.module.scss";
import {NavLink, useNavigate} from "react-router-dom";
import {LazyLoadImage} from "react-lazy-load-image-component";
import symbol from "@assets/symbol-defs.svg";
import React from "react";
import {ROUTE_PATH} from "@constants/routes";
import {localStorageSet} from "@utils/helpers";
import {LOCAL_GAME_URL} from "@constants/localkey";
import Imgix from "@components/Imgix";

const GameItem=({data,handleRoom,...props})=>{
    const navigate=useNavigate();
    const renderOlicon=()=>{
        return (
            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10" fill="none"><path d="M7.78243 7.00126C7.98931 8.18376 7.16525 9.0422 6.01681 9.23532C4.90775 9.42188 3.09993 9.42188 1.99087 9.23532C0.842435 9.04251 0.0183723 8.18438 0.225247 7.00157C0.400872 5.99813 1.25118 5.37282 2.28993 5.42657C3.04868 5.46594 3.51493 5.56469 4.05462 5.56469C4.60056 5.56469 4.96431 5.46594 5.71743 5.42657C6.75587 5.37219 7.60712 5.99782 7.78243 7.00126ZM3.86275 0.907195C4.95368 0.907195 5.83837 1.79157 5.83837 2.88313C5.83837 3.9747 4.95368 4.85907 3.86275 4.85907C2.7715 4.85907 1.88681 3.97438 1.88681 2.88313C1.88681 1.79188 2.7715 0.907195 3.86275 0.907195Z" fill="url(#paint0_linear_451_3515)"></path><path d="M7.42806 5.14407C7.95931 5.2425 8.59868 5.525 8.85493 6.28813C9.09181 6.99375 8.81275 7.54688 8.49493 7.91282C8.39368 8.02938 8.19087 7.92813 8.24118 7.78532C8.37181 7.41594 8.42431 6.94407 8.21993 6.42157C8.02118 5.91313 7.65337 5.59282 7.31962 5.39563C7.18025 5.31344 7.26681 5.11407 7.42806 5.14407ZM5.63118 0.938442C5.47243 0.825317 5.58681 0.582817 5.77868 0.631255C5.98087 0.682192 6.189 0.761567 6.38306 0.883442C7.02337 1.28657 7.33993 1.99969 7.22712 2.79188C7.17462 3.16157 7.01056 3.44907 6.82587 3.66625C6.70431 3.80969 6.46431 3.69032 6.51431 3.51157C6.63181 3.09219 6.6665 2.55657 6.44056 1.96813C6.25431 1.48344 5.93587 1.15625 5.63118 0.938442Z" fill="#26AB4B"></path><defs><linearGradient id="paint0_linear_451_3515" x1="5.21662" y1="0.333274" x2="5.21662" y2="9.37524" gradientUnits="userSpaceOnUse"><stop stop-color="#85F25E"></stop><stop offset="1" stop-color="#33EF00"></stop></linearGradient></defs></svg>
        );
    }
    const formatNum=(num)=>{
        num=Number(num);
        let snum=num+"";
        if (num>=1000){
            snum=(num/1000).toFixed(2)+"K";
        }
        return snum;
    }
    const getRoom=()=>{
        let room=[];
        let level_info=data.level_info;
        if (level_info){
            for (const key in level_info) {
                room.push({key:key,value:level_info[key]});
            }
        }
        return room;
    }
    const onEnterGame=()=>{
        let id=data.id;
        let url=data.link;
        localStorageSet(LOCAL_GAME_URL+id,url);
        let path=ROUTE_PATH.GAME+"/"+id;
        global.authLockPath=path;
        navigate(path);
    }
    const handleEnterRoom=(e)=>{
        if (handleRoom==null)onEnterGame();
        else
        {
            let room=getRoom();
            if (room.length>1)handleRoom(e,data);
            else onEnterGame();
        }
    }
    // return (
    //     <div className={styles.grid_item}>
    //         <button onClick={()=>{
    //             onEnterGame();
    //         }} className={styles.game_img_wrap}>
    //             <LazyLoadImage
    //                 src={data.img}
    //                 alt={"game-icon"}
    //                 effect={"blur"}
    //                 wrapperClassName={`lazy-image ${styles.game_img}`}
    //             />
    //             <div className={styles.online}>
    //                 {
    //                     renderOlicon()
    //                 }
    //                 <span>{formatNum(data.online)}</span>
    //             </div>
    //         </button>
    //         <div className={styles.bot_info}>
    //             <div className={styles.game_tit}>
    //                 <NavLink className={styles.game_desc}>
    //                     {data.brand}
    //                 </NavLink>
    //                 <button>
    //                     <svg className={`${styles.game_desc_icon}`}>
    //                         <use xlinkHref={`${symbol}#icon_Inform`} />
    //                     </svg>
    //                 </button>
    //             </div>
    //         </div>
    //     </div>
    // )
    return (
        <div className={`${styles.grid_item}`} {...props}>
            <button className={styles.game_img_wrap} onClick={(e)=>{
                // onEnterGame();
                // if (handleRoom)handleRoom(e,data);
                handleEnterRoom(e)
            }}>
                {/*<LazyLoadImage*/}
                {/*    src={data.img}*/}
                {/*    alt={"game-icon"}*/}
                {/*    effect={"blur"}*/}
                {/*    wrapperClassName={`lazy-image ${styles.game_img}`}*/}
                {/*/>*/}
                <Imgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={192}></Imgix>
            </button>
        </div>
    )
}
export default GameItem;