import { useState } from "react";
import useScrollToTop from "../../Hook/useScrollToTop";
import OtherHeader, { NavListProps } from "../../components/OtherHeader";
import { playingJs } from "../../assets/html";


const navList = [
    {
        label: '主线剧情',
        value: 'mainStoryline',
        children: [
            { label: '第一章-命起涟漪', value: 'dyz' }
        ]
    },
    {
        label: '日常玩法',
        value: 'dailyGameplay',
        children: [
            { label: '四宝挖宝', value: 'sbwb' },
            { label: '考古玩法', value: 'kgwf' },
            { label: '唐府风筝会', value: 'tffzh' },
            { label: '六界轶事', value: 'ljys' },
            { label: '七星伏魔阵', value: 'qxfmz' },
            { label: '伏魔', value: 'fm' },
            { label: '家园种植', value: 'jyzz' },
            { label: '寻宝任务', value: 'xbrw' },
            { label: '降妖任务', value: 'xyrw' },
            { label: '捉鬼任务', value: 'zgrw' },
            { label: '竞技场', value: 'jjc' },
            { label: '师门任务', value: 'smrw' },
            { label: '仙剑问答', value: 'xjwd' },
        ]
    },
    {
        label: '限时活动',
        value: 'limitedTimeEvent',
        children: [
            { label: '品剑大会', value: 'pjdh' },
            { label: '门派闯关', value: 'mpcg' }
        ]
    },
    {
        label: '副本活动',
        value: 'copyActivity',
        children: [
            { label: '雪妖惊情', value: 'xyjq' },
            { label: '仙灵幻梦', value: 'xmhm' },
        ]
    },
]

/**
 * 玩法介绍
 * @returns 
 */
const GameplayIntroduction: 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: playingJs?.[navInfo?.fatherNav?.value]?.[navInfo?.nav] }} />}
        </OtherHeader>
    </div>
}

export default GameplayIntroduction