web2468/src/components/GameTabs/index.jsx

import styles from "@components/GameTabs/styles.module.scss";
import React, {Fragment, Suspense, useEffect, useState} from "react";
import symbol from '@assets/symbol-defs.svg';
import AllWidgets from "@widgets/index";
import SmallLoading from "@components/SmallLoading";
import SvgIcon from "@components/SvgIcon";
import tabin_1 from "@assets/gametabs/tabin_1.png";
import tabin_2 from "@assets/gametabs/tabin_2.png";
const i18n=global.i18n;
const GameTabs=({data})=>{
    const [tabIndex, setTabIndex] = useState(1);
    // data={
    //     tabs:[
    //         {type:0,title:'Lobby',icon:'icon_Lobby'},
    //         {type:1,title:'Top Picks',icon: 'icon_ClassicDice'},
    //         {type:2,title:'Slots',icon: 'icon_Slots'},
    //         {type:3,title:'Hot Games',icon: 'icon_HotGame'},
    //         {type:4,title:'Live Casino',icon: 'icon_LiveCasino'},
    //         {type:5,title:'Table Games',icon: 'icon_TableGame'},
    //         {type:6,title:'New Releases',icon: 'icon_NewReleases'},
    //     ],
    //     data:{
    //
    //     }
    // }
    useEffect(()=>{
        if (data&&data.tabs){
            let selectType=-1;
            let tabs=data.tabs;
            let tabtype=data.tabtype;
            if (tabtype!=null){
                for (let i = 0; i < tabs.length; i++) {
                    let tab=tabs[i];
                    if (tab.tabtype===tabtype){
                        selectType=tabtype;
                        break;
                    }
                }
            }
            if (selectType===-1){
                let first=data.tabs[0];
                if (first){
                    selectType=first.tabtype
                }
            }
            setTabIndex(selectType);
        }
    },[]);
    const changeTab=(tabIndex)=>{
        setTabIndex(tabIndex);
    }
    const renderMask=(item,index,len)=>{
        if (item.tabtype!==tabIndex)return (<></>);
        let mask=(<></>);
        // if (index===0){
        //     mask=(<img className={styles.mask_first} src={tabin_1}/>)
        // }
        // else if (index===len-1){
        //     mask=(<img className={styles.mask_last} src={tabin_1}/>)
        // }
        // else
        // {
        //     mask=(<img className={styles.mask_center} src={tabin_2}/>)
        // }
        mask=(<img className={styles.mask_center} src={tabin_1}/>)
        return (
            <div className={styles.tab_mask}>
                {mask}
            </div>
        )
    }
    const renderTabs=()=>{
        let tabs=data.tabs;
        if (tabs==null)tabs=[];
        if (tabs.length===0)return (<></>);
        return (
            <div className={styles.game_tabs}>
                {
                    tabs.map((item,index)=>{
                        return (
                            <button key={index} onClick={()=>{
                                changeTab(item.tabtype);
                            }} className={`${styles.tab_item} ${index===0?styles.tab_item_first:''} ${index===tabs.length-1?styles.tab_item_last:''}`}>
                                {renderMask(item,index,tabs.length)}
                                <div className={`${styles.tab_content} ${item.tabtype===tabIndex?styles.active:''}`}>
                                    <SvgIcon className={styles.icon} herf={item.icon}/>
                                    {i18n.t(item.title)}
                                </div>
                            </button>
                        )
                    })
                }
            </div>
        )
    }
    const getModules=()=>{
        let modules=data.data;
        let list=[];
        if (modules){
            for (let i = 0; i < modules.length; i++) {
                let item=modules[i];
                if (item.tabtype===tabIndex){
                    list.push(item);
                }
            }
        }
        return list;
    }
    const renderModule=()=>{
        let list=getModules();
        if (list==null||list.length===0)return (<></>);
        return (
            <>
                {
                    list.map((item,index)=>{
                        let Comp=AllWidgets[item.type];
                        if (Comp==null)return (<></>);
                        return (
                            <Fragment key={index}>
                                <Suspense fallback={<SmallLoading/>}>
                                    <Comp key={"Comp_"+tabIndex+"_"+index} data={item}></Comp>
                                </Suspense>
                            </Fragment>
                        )
                    })
                }
            </>
        )
    }
    return (
        <div className={`w-100 layout ${styles.container}`}>
            {renderTabs()}
            {renderModule()}
        </div>
    )
}
export default GameTabs;