import React, { useRef, useState } from "react"
import img1 from '../../assets/image/dataCenter/yxjs.png'
import img2 from '../../assets/image/dataCenter/xtjs.png'
import img3 from '../../assets/image/dataCenter/wfjs.png'
import img4 from '../../assets/image/dataCenter/cyxx.png'
import VideoPopup from "../../components/VideoPopup"
import { useNavigate } from "react-router-dom"

const FENGHUATYPELIST = [
    { label: '资料中心', value: 'gallery' },
    { label: '视频中心', value: 'video' },
    { label: '原声音乐', value: 'audio' }
]

const DATACENTER = [
    { label: '游戏介绍', href: '/gameIntroduction', img: img1 },
    { label: '系统介绍', href: '/systemIntroduction', img: img2 },
    { label: '玩法介绍', href: '/gameplayIntroduction', img: img3 },
    { label: '常用信息', href: '/commonInformation', img: img4 }
]

// 视频
const VIDEOCENTER = [
    { label: '6周年版本', href: 'https://image.gaeamobile.net/video/20220815/104825/01_1920x1080_1.mp4', coverImage: 'https://image.gaeamobile.net/image/20220815/104825/%E4%B8%BB%E8%A7%86%E8%A7%89%E5%88%86%E5%B1%82.jpg' },
    { label: '仙四资料片“寻仙篇”', href: 'https://image.gaeamobile.net/image/20220815/140921/IOS%E6%8F%90%E5%AE%A1%201920x1080.mp4', coverImage: 'https://image.gaeamobile.net/image/20220815/140921/%E5%8F%AC%E5%9B%9E%E5%BD%A9%E4%BF%A1%E9%85%8D%E5%9B%BE.jpg' },
]
// 音频
const AUDIOCENTER = [
    {
        "name": "仙缘再续（创角）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d557c60c3.mp3"
    },
    {
        "name": "玉满堂-变奏（帮派）",
        "author": "作曲者：吕圣斐",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d526ed382.mp3"
    },
    {
        "name": "眉间心上（唐府）",
        "author": "作曲者：骆集益",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d4f80e132.mp3"
    },
    {
        "name": "蝶恋（仙灵岛）",
        "author": "作曲者：林坤信",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d4e03b266.mp3"
    },
    {
        "name": "紫鸦乌（九黎祠）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d4c2220f3.mp3"
    },
    {
        "name": "迷仙引（三皇台）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d49c021a2.mp3"
    },
    {
        "name": "凄凉雪（鬼界）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d484b7f18.mp3"
    },
    {
        "name": "魔神诀（锁妖塔遗迹）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d468466c9.mp3"
    },
    {
        "name": "水漫声（神降密境）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d44d28e48.mp3"
    },
    {
        "name": "南柯子（青木幻域）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d40ad51d7.mp3"
    },
    {
        "name": "霜华春变奏（雪石路）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d3f610ee5.mp3"
    },
    {
        "name": "临江仙（丹枫谷）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d3d534e2d.mp3"
    },
    {
        "name": "少年游（苍木山）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d3bf82ae0.mp3"
    },
    {
        "name": "翳世（祭都）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d3ab1864b.mp3"
    },
    {
        "name": "软红千丈（唐家堡）",
        "author": "作曲者：骆集益",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d383aebf8.mp3"
    },
    {
        "name": "步虚词（绿萝山）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d3591a43c.mp3"
    },
    {
        "name": "余霞成绮（峨眉）",
        "author": "作曲者：周志华",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d330359b9.mp3"
    },
    {
        "name": "定倾局（折剑山庄）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d31d25169.mp3"
    },
    {
        "name": "巫月神殿",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d2f8bf2d9.mp3"
    },
    {
        "name": "破阵子（覆天顶）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d2d526178.mp3"
    },
    {
        "name": "降妖谱（蜀山）",
        "author": "作曲者：周志华",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d2b92a742.mp3"
    },
    {
        "name": "陌上花（青荷镇）",
        "author": "作曲者：吴欣睿",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d29eb31f1.mp3"
    },
    {
        "name": "杭州（开封）",
        "author": "作曲者：曾志豪",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d1f397b1c.mp3"
    },
    {
        "name": "苏州",
        "author": "作曲者：少年行骆集益",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d0f65d572.mp3"
    },
    {
        "name": "主题登陆",
        "author": "作曲者：心愿陈依婷",
        "href": "https://image.gaeamobile.net/video/20220811/110500/5732d0ac52d19.mp3"
    }
]

/**
 * 风华集
 * @returns 
 */
const FenhuaBox: React.FC = () => {

    /********************************/
    const [active, setActive] = useState<string>('gallery')
    const [playVideo, setPlayVideo] = useState<{ src: string, show: boolean }>({ src: 'https://image.gaeamobile.net/image/20220815/104825/%E4%B8%BB%E8%A7%86%E8%A7%89%E5%88%86%E5%B1%82.jpg', show: false })
    const [playAudioIndex, setPlayAudioIndex] = useState<number>(0)
    const [isPlaying, setIsPlaying] = useState(false);
    const audioRef: { current: any } = useRef(null);

    const navigate = useNavigate(); 
    /********************************/

    const handlePlay = () => {
        setIsPlaying(true);
    };

    const handlePause = () => {
        setIsPlaying(false);
    };

    const playAudioInfo = AUDIOCENTER[playAudioIndex]
    return <section className="fenghua-box">
        <h1 className="news-title"><span>风华集</span></h1>
        <ul className="fenghua-type">
            {FENGHUATYPELIST.map(item => <li className={active === item.value ? 'active' : ''} onClick={() => setActive(item.value)} key={item.value}>{item.label}</li>)}
        </ul>
        <div className="fenghua-con">
            <div className={`fenghua-item ${active === 'gallery' ? 'active' : ''}`}>
                <div className="newslist-swiper-fenghua-con-div">
                    {DATACENTER.map((item, index) => <div key={index} onClick={() => {
                        navigate(item.href)
                    }}>
                        <div>
                            <img src={item.img} alt="" />
                            {/* <span>{item.label}</span> */}
                        </div>
                    </div>)}
                </div>
            </div>

            <div className={`fenghua-item ${active === 'video' ? 'active' : ''}`}>
                <div className="newslist-swiper-fenghua-con-div video-swiper">
                    {VIDEOCENTER.map((item, index) => <div key={index}>
                        <div onClick={() => setPlayVideo({ show: true, src: item.href })}>
                            <img src={item.coverImage} alt="" />
                            <span>{item.label}</span>
                        </div>
                    </div>)}
                </div>
            </div>

            <div className={`fenghua-item ${active === 'audio' ? 'active' : ''}`}>
                <div className="audio-box">
                    <div className="audio-cd">
                        <span className={`audio-circle ${isPlaying ? 'active' : ''}`}></span>
                        <i></i>
                    </div>
                    <div className="audio-info">
                        <h2>{playAudioInfo.name}</h2>
                        <p>{playAudioInfo.author}</p>
                    </div>
                    <div className="audio-box">
                        <audio
                            ref={audioRef}
                            controls
                            src={playAudioInfo.href}
                            id="audio-player"
                            onPlay={handlePlay}
                            onPause={handlePause}
                            onEnded={() => setIsPlaying(false)} // 音频播放结束时设置状态  
                        ></audio>
                    </div>
                    <div className="audio-control">
                        <span className="btn-audio-prev" onClick={() => {
                            setPlayAudioIndex(index => index === 0 ? AUDIOCENTER.length - 1 : index - 1)
                            setTimeout(() => {
                                audioRef?.current?.play();
                            }, 50)
                        }}></span>
                        <span className="btn-audio-next" onClick={() => {
                            setPlayAudioIndex(index => index === AUDIOCENTER.length - 1 ? 0 : index + 1)
                            setTimeout(() => {
                                audioRef?.current?.play();
                            }, 50)
                        }}></span>
                    </div>
                </div>
            </div>
        </div>

        {/* 视频播放 */}
        <VideoPopup {...playVideo} onClose={() => setPlayVideo((data) => ({ ...data, show: false }))} />
    </section>
}

export default React.memo(FenhuaBox)