import React, {useState, useEffect} from 'react';
import styles from './HomePage.module.css'
import { Header, Footer, Carousel, SideMenu, ProductCollection, BusinessPartners } from '../../components';
import { Row, Col, Typography, Spin } from 'antd';
// import { productList1, productList2, productList3 } from './mockups';
import sideImage1 from '../../assets/images/sider_2019_12-09.png';
import sideImage2 from '../../assets/images/sider_2019_02-04.png';
import sideImage3 from '../../assets/images/sider_2019_02-04-2.png';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { initRecommendProductDataActionCreator } from '../../redux/recommendProducts/recommendProductsActions';
import { RootState } from '../../redux/store'

interface State {
    productList: any[],
    loading: boolean
}


export const HomePage: React.FC = () => {
    const { t } = useTranslation()
    const dispatch = useDispatch()
    const productList = useSelector((state: RootState) => state.recommendProduct.productList)
    const loading = useSelector((state: RootState) => state.recommendProduct.loading)

    useEffect(() => {
        dispatch(initRecommendProductDataActionCreator());
    },  [])

    return (
        <>
        <Header/>
        {/* 页面内容 content */}
        <div className={styles['page-content']}>
            <Row style={{marginTop: 20}}>
            <Col span={6}>
                <SideMenu/>
            </Col>
            <Col span={18}>
                <Carousel/>
            </Col>
            </Row>
            <>
            {
             loading ? 
             <Spin></Spin> : <>
                <ProductCollection 
                title={<Typography.Title level={3} type="warning">{t('home_page.hot_recommended')}</Typography.Title>}
                sideImage={sideImage1}
                products={productList[0].touristRoutes}
                />
                <ProductCollection 
                title={<Typography.Title level={3} type="danger">{t('home_page.new_arrival')}</Typography.Title>}
                sideImage={sideImage2}
                products={productList[1].touristRoutes}
                />
                <ProductCollection 
                title={<Typography.Title level={3} type="success">{t('home_page.domestic_travel')}</Typography.Title>}
                sideImage={sideImage3}
                products={productList[2].touristRoutes}
                /></>
            }
            </>
            <BusinessPartners/>
        </div>
        <Footer/>
        </>
    )
}