import './index.less'
import OtherHeader, { NavListProps } from '../../components/OtherHeader'
import { gameJS } from '../../assets/html'
import { useState } from 'react'
import useScrollToTop from '../../Hook/useScrollToTop'

const navList = [
    {
        label: '游戏背景',
        value: 'gameBack',
        children: [
            {
                label: '角色介绍',
                value: 'roleInfo',
            },
            {
                label: '门派介绍',
                value: 'sectInfo',
            },
            {
                label: '地图介绍',
                value: 'mapInfo',
            },
            {
                label: '背景介绍',
                value: 'backInfo',
            }
        ]
    },
    {
        label: '游戏前提',
        value: 'gamePremise',
        children: [
            {
                label: '游戏前提',
                value: 'gamePremise',
            }
        ]
    },
    {
        label: '新手上路',
        value: 'noviceRoad',
        children: [
            {
                label: '新手上路',
                value: 'noviceRoad',
            }
        ]
    }
]
/**
 * 游戏介绍
 * @returns 
 */
const GameIntroduction: React.FC = () => {

    useScrollToTop();
    
    /*****************************************/
    const [navInfo, setNavInfo] = useState<{ nav: string, fatherNav: NavListProps }>()
    /*****************************************/

    return <div className="gameIntroduction">
        <OtherHeader
            title='游戏介绍'
            navList={navList}
            onChange={(nav, fatherNav) => {
                setNavInfo({ nav, fatherNav })
            }}
        >
            {(navInfo?.nav && navInfo?.fatherNav?.value) && <div className='article-box' dangerouslySetInnerHTML={{ __html: gameJS?.[navInfo?.fatherNav?.value]?.[navInfo?.nav] }} />}
        </OtherHeader>
    </div>
}

export default GameIntroduction