import styles from './styles.module.scss';
import {useThemeProvider} from "@contexts/themeContext";
import React, {useRef, useState,useEffect} from 'react';
import {Swiper, SwiperSlide} from "swiper/react";
import {Autoplay, EffectCube, EffectFade,Virtual} from "swiper/modules";
import {StyledSwiper} from "@components/AutoBanner/style";
import {NavLink} from "react-router-dom";
import LazyImage from "@components/LazyImage";
import {LazyLoadImage} from "react-lazy-load-image-component";
import { gsap } from 'gsap';
import lv_1 from "@assets/lvicon/gold_mini.png";
import lv_2 from "@assets/lvicon/platinum_mini.png";
import lv_3 from "@assets/lvicon/diamond_mini.png";
import usdimg from "@assets/lvicon/USD.black.png";
import symbol from '@assets/symbol-defs.svg';
import {useNavigate} from "react-router";
import {numFormatter} from "@utils/helpers";
import LazyImgix from "@components/Imgix/LazyImgix";


const i18n=global.i18n;
const AutoWinList=({data})=>{
    const {isMobile} = useThemeProvider();
    const [currIndex,setCurrIndex]=useState(0);
    const [swiper, setSwiper] = useState(null);
    const navigate=useNavigate();
    const lvicon=[lv_1,lv_2,lv_3];
    if (data==null)data={};
    // data={
    //     title:"win_list.big_wins",
    //     tabs:[
    //         {type:0,title:'win_list.tab_all'},
    //         {type:1,title:'win_list.tab_slots'},
    //     ],
    //     list:[
    //         {
    //             img:'https://bc.imgix.net/game/image/e64b58eb7f.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'xllsdfag',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/eef9a463-c2e9-416a-9922-4ccd65e4898f.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/8eb116c0-8c55-4016-9d50-683c444666bf.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/898a5bb528.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/f7274b14-e905-4daf-a0c3-4be958022190.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/f7274b14-e905-4daf-a0c3-4be958022190.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/f7274b14-e905-4daf-a0c3-4be958022190.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },
    //         {
    //             img:'https://bc.imgix.net/game/image/f7274b14-e905-4daf-a0c3-4be958022190.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         },{
    //             img:'https://bc.imgix.net/game/image/f7274b14-e905-4daf-a0c3-4be958022190.png?auto=format&dpr=2&w=200',
    //             gtype:'1',
    //             uid:'1234567',
    //             nick:'XDFLASKDJGLA',
    //             lv:1,
    //             win:79893
    //         }
    //     ]
    // }
    const renderTitle=()=>{
        return (
            <p className={styles.list_title}>
                <b></b>
                {i18n.t(data.title)}
            </p>
        )
    }
    const changeTab=(index)=>{
        setCurrIndex(index);
    }
    const renderTabs=()=>{
        let tabs=data.tabs;
        if (tabs==null)tabs=[];
        return (
            <div className={styles.tabs}>
                {
                    tabs.map((tab,index)=>{
                        return(
                            <button onClick={()=>{
                                changeTab(tab.type);
                            }} className={`${styles.tab_btn} ${tab.type==currIndex?styles.active:''}`} key={index}>
                                <div>{i18n.t(tab.title)}</div>
                            </button>
                        )
                    })
                }
            </div>
        )
    }
    const getAutoList=()=>{
        let list=[];
        let all=data.data;
        if (all!=null){
            if (currIndex==0)list=all.slice(0);
            else
            {
                for (let i = 0; i < all.length; i++) {
                    let item=all[i];
                    if (item){
                        if (item.gtype==currIndex){
                            list.push(item);
                        }
                    }
                }
            }
        }
        return list;
    }
    const containerRef=useRef(null);
    const [rollState,setRollState]=useState(0);
    const startRoll=()=>{
        if (containerRef==null)return;
        const container = containerRef.current;
        if (container==null)return;
        if (container.rollState==1)return;
        if (container.firstChild==null)return;
        const offsetX=container.firstChild.clientWidth;
        const endIndex=container.endIndex;
        let currIndex=container.currIndex;
        currIndex++;
        container.scrollLeft=currIndex*offsetX;
        container.currIndex=currIndex;
        if (currIndex>endIndex){
            setRollState(2);
        }
        if (container.rollTimer!=null)clearTimeout(container.rollTimer)
        container.rollTimer=setTimeout(function () {
            startRoll();
        },2000);
    }
    const initRollList=()=>{
        if (containerRef==null)return;
        const container = containerRef.current;
        if (container==null)return;
        const list=getAutoList();
        container.endIndex=list.length;
        container.currIndex=0;
        startRoll();
    }
    const checkReset=()=>{
        const container = containerRef.current;
        if (container!=null){
            const dis=container.scrollLeft;
            const width=container.firstChild.clientWidth;
            const index=Math.floor(dis/width);
            const len=container.endIndex;
            let currIndex=index<len?index:(index-len);
            container.currIndex=currIndex;
            container.scrollLeft=currIndex*width;
        }
    }
    useEffect(()=>{
        const container = containerRef.current;
        if (container==null)return;
        if (rollState==0){
            startRoll();
        }
        else if (rollState==2){
            checkReset();
            setRollState(0);
        }
        container.rollState=rollState;
    },[rollState])
    useEffect(()=>{
        let  container=null;
        if (containerRef.current!=null){
            container=containerRef.current;
            initRollList();
        }
        return ()=>{
            if (container){
                if (container.rollTimer!=null)clearInterval(container.rollTimer);
            }
        };
    },[currIndex]);
    const formatGolds=(golds)=>{
        golds=Number(golds);
        // let str=golds<1000?golds.toFixed(2):(golds/1000).toFixed(2)+"K";
        let str=numFormatter(golds);
        return global.DOLLAR+str;
    }
    const renderHAuto=()=>{
        let hlist=getAutoList();
        let list=hlist.concat(hlist);
        return (
            <div onMouseEnter={()=>{setRollState(1)}} onMouseLeave={()=>setRollState(2)} className={`${styles.swiper_container} ${rollState==2?styles.swiper_stop:''}`} ref={containerRef}>
                {
                     list.map((item, index) => (
                         <div key={index} className={styles.swiper_item} onClick={()=>{
                             onClickLink(item.link);
                         }}>
                             {/*<LazyLoadImage*/}
                             {/*    src={item.img}*/}
                             {/*    alt={"game-icon"}*/}
                             {/*    effect={"blur"}*/}
                             {/*    wrapperClassName={`lazy-image ${styles.game_icon}`}*/}
                             {/*/>*/}
                             <LazyImgix
                                 src={item.img}
                                 alt={"game-icon"}
                                 width={150}
                                 className={`${styles.game_icon}`}
                             />
                             <div className={styles.nick_name}>
                                <img src={lvicon[item.lv-1]}/>
                                <div className={styles.name_txt}>
                                    {item.nick}
                                </div>
                             </div>
                             <div className={styles.amount_wrap}>
                                 {formatGolds(item.win)}
                             </div>
                         </div>
                     ))
                }
            </div>
        )
    }
    useEffect(() => {
        if (swiper) {
            swiper.update();
        }
    }, [swiper]);
    const renderVAuto=()=>{
        let all=data.data;
        let list=all==null?[]:all.slice(0);
        return(
            <>
                <Swiper
                    className={styles.swiper_container_m}
                    onSwiper={setSwiper}
                    direction={"vertical"}
                    slidesPerView={1}
                    loop
                    autoplay={{delay: 1000, disableOnInteraction: false}}
                    effect="fade"
                    fadeEffect={{crossFade: true}}
                    modules={[Autoplay, EffectCube,Virtual]}
                    speed={1000}
                    virtual={true}
                >
                    {
                        list.map((item,index)=>{
                            return (
                                <SwiperSlide key={index}>
                                    <div className={styles.swiper_item_m} onClick={()=>{
                                        onClickLink(item.link);
                                    }}>
                                        {/*<LazyLoadImage*/}
                                        {/*    src={item.img}*/}
                                        {/*    alt={"game-icon"}*/}
                                        {/*    effect={"blur"}*/}
                                        {/*    wrapperClassName={`lazy-image ${styles.game_icon_m}`}*/}
                                        {/*/>*/}
                                        <div className={styles.game_icon_m}>
                                            <LazyImgix
                                                src={item.img}
                                                alt={"game-icon"}
                                                width={48}
                                                className={`${styles.game_icon_m}`}
                                            />
                                        </div>
                                        <div className={styles.user_name_m}>
                                            {item.nick}
                                        </div>
                                        <div className={styles.play_btn}>
                                            <div className={styles.user_money}>
                                                <div className={styles.amount_m}>
                                                    {formatGolds(item.win)}
                                                </div>
                                                <img className={styles.coin_m} src={usdimg}/>
                                            </div>
                                            {/*<svg className={styles.icon_arrow}>*/}
                                            {/*    <use xlinkHref={`${symbol}#icon_Arrow`} />*/}
                                            {/*</svg>*/}
                                        </div>
                                    </div>
                                </SwiperSlide>
                            )
                        })
                    }
                </Swiper>
            </>
        )
    }
    const onClickLink=(link)=>{
        if (navigate!=null){
            navigate(link);
        }
    }
    const renderDesktop=()=>{
        return (
            <div className={styles.list_context}>
                {renderTabs()}
                {renderHAuto()}
            </div>
        )
    }
    const renderMobile=()=>{
        return (
            <div className={styles.list_context_m}>
                {renderVAuto()}
            </div>
        )
    }
    const renderContext=()=>{
        let view=isMobile()?renderMobile():renderDesktop();
        return view;
    }
    return (
        <div className={`w-100 ${isMobile()?styles.win_list_container_m:styles.win_list_container}`}>
            {renderTitle()}
            {renderContext()}
        </div>
    )
}
export default AutoWinList;
