import { List, Skeleton, Typography } from "antd"
import { useState } from "react"
import { useNavigate } from "react-router-dom"
import moment from "moment"
import { NAVLIST, STRATEGYLIST } from "./const";
import { scrollToTab } from "../../utils";
import useScrollToTop from "../../Hook/useScrollToTop";
const { Text } = Typography;

const Strategy: React.FC = () => {

    useScrollToTop();
    /***********************************/
    const navigate = useNavigate();
    const [active, setActive] = useState<string>('all')
    /***********************************/

    return <div className="news strategy">
        <div className="bg-box" style={{ height: '100%' }}>
            <div className="bg bg-top"></div>
            <div className="bg bg-btm"></div>
        </div>
        <div className="mainbody">
            <div className="age-tip"></div>
            <div className="news-nav">
                <div className="location-box">
                    <a className="goback" onClick={() => navigate(-1)}></a>
                    <div className="location">当前位置：游戏攻略</div>
                </div>
                <div className="news-nav-con">
                    <h2 className="news-tit-text">游戏攻略</h2>
                    <div className="news-nav-con-strategy">
                        <div className="left" />
                        <div className="strategy-nav">
                            <ul>
                                {NAVLIST.map(item => <li
                                    key={item.value}
                                    className={active === item.value ? 'active' : ''}
                                    onClick={(e) => {
                                        setActive(item.value)
                                        scrollToTab(e)
                                    }}
                                >{item.label}</li>)}
                            </ul>
                        </div>
                        <div className="right" />
                    </div>
                </div>
            </div>
            <List
                className="news-con"
                itemLayout="horizontal"
                size="small"
                dataSource={STRATEGYLIST.filter(item => ['388', '389', '390', '391', '392'].includes(active) ? item.category_id === active : true).sort((a, b) => moment(b.post_date) > moment(a.post_date) ? 1 : -1)}
                rowKey={'post_id'}
                renderItem={(item) => (
                    <List.Item onClick={() => {
                        navigate('/article', { state: item });
                    }}>
                        <Skeleton title={false} loading={false} active>
                            <List.Item.Meta
                                description={<Text ellipsis className="list-text"><strong>【{item.category_name}】</strong><span>{item.post_title}</span></Text>}
                            />
                            <div className="list-time">{moment(item.post_date).format('YYYY-MM-DD')}</div>
                        </Skeleton>
                    </List.Item>
                )}
            />
        </div>
    </div>
}

export default Strategy