import { Carousel } from "antd"
import React, { useRef, useState } from "react"

import img1 from '../../assets/image/news/七载光阴共赴佳约.jpg'
import img2 from '../../assets/image/news/回魂梦中再续前缘.png'
import img3 from '../../assets/image/news/引擎升级.jpg'
import { useNavigate } from "react-router-dom"
import { NEWSLIST as NEWSDATALIST } from '../News/const'
import moment from "moment"

const CAROUSELDATA = [
    { image: img1, value: 'qy' },
    { image: img2, value: 'ltx' },
    { image: img3, value: 'sm' },
]

const NEWSLIST = [
    { label: <><span>最</span><span>新</span></>, value: 'zx' },
    { label: <><span>新</span><span>闻</span></>, value: '382' },
    { label: <><span>公</span><span>告</span></>, value: '383' },
    { label: <><span>活</span><span>动</span></>, value: '384' },
]

/**
 * 新闻资讯
 * @returns 
 */
const NewsBox: React.FC = () => {

    /****************************/
    const navigate = useNavigate();
    const ref = useRef<any>()
    const ref1 = useRef<any>()
    const [active, setActive] = useState<number>(0)
    const [newsActiveType, setNewsActiveType] = useState<{ index: number, newsType: string }>({ index: 0, newsType: 'zx' })
    /****************************/

    return <section className="news-box">
        <h1 className="news-title"><span>新闻资讯</span></h1>
        <div className="newspic-swiper">
            <div className="swiper">
                <Carousel autoplay dots={false} ref={ref} beforeChange={(_: number, nextSlide: number) => { setActive(nextSlide) }}>
                    {CAROUSELDATA.map(item => <div key={item.value}>
                        <img src={item.image} alt="" />
                    </div>)}
                </Carousel>
            </div>
            <div className="swiper-pagination">
                {CAROUSELDATA.map((item, index) => <span
                    key={item.value}
                    className={`swiper-pagination-bullet ${active === index ? 'swiper-pagination-bullet-active' : ''}`}
                    onClick={() => {
                        ref?.current?.goTo(index)
                    }}
                ></span>)}
            </div>
        </div>
        <div className="newslist-box">
            <div className="newslist-nav">
                <ul>
                    {NEWSLIST.map((item, index) => <li
                        key={item.value}
                        className={newsActiveType.newsType === item.value ? 'active' : ''}
                        onClick={() => {
                            setNewsActiveType({ index, newsType: item.value })
                            ref1?.current?.goTo(index)
                        }}
                    >{item.label}</li>)}
                </ul>
                <a className="btn-news-more" onClick={() => navigate('/news')}>更多</a>
            </div>
            <div className="newslist-swiper">
                <Carousel
                    dots={false}
                    ref={ref1}
                    beforeChange={(_: number, nextSlide: number) => {
                        setNewsActiveType({ index: nextSlide, newsType: NEWSLIST[nextSlide].value })
                    }}
                >
                    {NEWSLIST.map(item => <div key={item.value} className="newslist-swiper-newslist-box-div">
                        <ul>
                            {NEWSDATALIST.sort((a, b) => moment(b.post_date) > moment(a.post_date) ? 1 : -1).filter(i => ['382', '383', '384'].includes(item.value) ? i.category_id === item.value : true).slice(0, 5).map(item => <li key={item.post_id}>
                                <a onClick={() => navigate('/article', { state: item })}>[{item.category_name}]{item.post_title}</a>
                                <span>{moment(item.post_date).format('MM-DD')}</span>
                            </li>)}
                        </ul>
                    </div>)}
                </Carousel>
            </div>
        </div>
    </section>
}

export default React.memo(NewsBox)