import styles from "@components/GameTabs/styles.module.scss";
import React, {Fragment, useState} from "react";
import symbol from '@assets/symbol-defs.svg';
import AllWidgets from "@widgets/index";
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:{
    //
    //     }
    // }
    const changeTab=(tabIndex)=>{
        setTabIndex(tabIndex);
    }
    const renderTabs=()=>{
        let tabs=data.tabs;
        if (tabs==null)tabs=[];
        return (
            <div className={styles.game_tabs}>
                {
                    tabs.map((item,index)=>{
                        return (
                            <button key={index} onClick={()=>{
                                changeTab(item.tabtype);
                            }} className={`${styles.tab_item} ${item.tabtype==tabIndex?styles.active:''}`}>
                                <svg className={styles.icon}>
                                    <use xlinkHref={`${symbol}#${item.icon}`} />
                                </svg>
                                {item.title}
                            </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();
        return (
            <>
                {
                    list.map((item,index)=>{
                        let Comp=AllWidgets[item.type];
                        if (Comp==null)return (<></>);
                        return (
                            <Fragment key={index}>
                                <Comp data={item}></Comp>
                            </Fragment>
                        )
                    })
                }
            </>
        )
    }
    return (
        <div className={`w-100 layout ${styles.container}`}>
            {renderTabs()}
            {renderModule()}
        </div>
    )
}
export default GameTabs;