import * as React from "react";
// import { Component } from "react";
import { withTranslation, WithTranslation } from "react-i18next";

import {
  Header,
  Footer,
  SideMenu,
  Carouseee,
  ProductCollection,
  Bussiness,
} from "../../components";
import { connect } from "react-redux";
import styles from "./home.module.css";
import {
  // fetchRecommendProductSuccessActionCreator,
  // fetchRecommendProductStartActionCreator,
  // fetchRecommendProductFailActionCreator,
  giveMeDataActionCreator
} from "../../redux/recommendProducts/recommendProductActions";
//0D1F49DD13B9C757
import { productList1, productList2, productList3 } from "./mockups";
import sideImage1 from "../../assets/images/sider_2019_02-04-2.png";
import sideImage2 from "../../assets/images/sider_2019_02-04.png";
import sideImage3 from "../../assets/images/sider_2019_12-09.png";
import { Row, Col, Typography, Spin } from "antd";
import axios from "axios";
import { RootState } from "../../redux/store";

const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProduct.loading,
    error: state.recommendProduct.error,
    productList: state.recommendProduct.productList,
  };
};
const mapDispatchProps = (dispatch) => {
  return {
    // fetchStart: () => {
    //   dispatch(fetchRecommendProductStartActionCreator());
    // },
    // fetchSuccess: (data) => {
    //   dispatch(fetchRecommendProductSuccessActionCreator(data));
    // },
    // fetchFail: (error) => {
    //   dispatch(fetchRecommendProductFailActionCreator(error));
    // },
    giveMeData:()=>{
      dispatch(giveMeDataActionCreator())
    }
  };
};
type PropsType = WithTranslation &
  ReturnType<typeof mapDispatchProps> &
  ReturnType<typeof mapStateToProps>;
export class HomePageComponent extends React.Component<PropsType> {
   componentDidMount() {
  this.props.giveMeData()
  

  }

  render() {
    const { t } = this.props;

    const { productList, loading, error } = this.props;
    console.log("productList", productList);
    // if (!productList.length) return null;
    if (loading) {
      return (
        <Spin
          size="large"
          style={{
            marginTop: 200,
            marginBottom: 200,
            marginLeft: "auto",
            marginRight: "auto",
            width: "100%",
          }}
        />
      );
    }
    if (error) {
      return <div>网站出错：{error}</div>;
    }
    return (
      <>
        <Header />
        {/* 页面内容 */}
        <div className={styles["page-content"]}>
          <Row style={{ marginTop: 20 }}>
            <Col span={6}>
              <div>
                <SideMenu />
              </div>
            </Col>
            <Col span={18}>
              <div>
                <Carouseee />
              </div>
            </Col>
          </Row>
          {/* {productList.map} */}
          <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.hot_recommended")}
              </Typography.Title>
            }
            sideImage={sideImage3}
            products={productList[2].touristRoutes}
          />
          <Bussiness />
        </div>

        <Footer />
      </>
    );
  }
}

export const HomePage = connect(
  mapStateToProps,
  mapDispatchProps
)(withTranslation()(HomePageComponent));