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";
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 renderTabItem = (item, index) => {
        if (item.tabtype === 0) {
            let list = getModules(0);
            if (!!list && list.length > 0) {
                let like = list[0].data;
                if (!like || like.length == 0) {
                    if (tabIndex === 0) setTabIndex(1);
                    return null
                }
            }
        }

        return (
            <button key={index} onClick={() => {
                changeTab(item.tabtype);
            }} className={`${styles.tab_item} ${item.tabtype === tabIndex ? styles.active : ''}`}>
                <SvgIcon className={styles.icon} herf={item.icon} />
                {i18n.t(item.title)}
            </button>
        )
    }
    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 renderTabItem(item, index)
                    })
                }
            </div>
        )
    }
    const getModules = (tabtype = -1) => {
        tabtype = tabtype == -1 ? tabIndex : tabtype;
        let modules = data.data;
        let list = [];
        if (modules) {
            for (let i = 0; i < modules.length; i++) {
                let item = modules[i];
                if (item.tabtype === tabtype) {
                    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;
