import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import UserSource from './components/UserSource.jsx';
import UserSourcepie from './components/UserSourcepie.jsx';
import UserBehaviorIndex from './components/UserBehaviorIndex.jsx';
import UserActive from './components/UserActive';
import UserSex from './components/UserSex';
import NewUsers from './components/NewUsers';
import UserConversion from './components/UserConversion';
import IntentionalCustomers from './components/IntentionalCustomers';
import styles from './styles.less';
import moment from 'moment';
import CityNums from './components/charts/CityNums';
const indexEcharts = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [checkData, setCheckData] = useState([]);

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    setCheckData(props.checkData);
  }, [props.checkData]);

  const endDate = new Date();

  const startDate = moment()
    .subtract(7, 'day')
    .toDate();

  function onTabledatas(e) {}

  return (
    <>
      <div style={{ display: 'flex', width: '100%' }}>
        {checkData.includes('user_source') && (
          <div className={styles.bar}>
            <UserSource
              endDate={endDate}
              startDate={startDate}
              onSuccess={e => onTabledatas(e)}
            ></UserSource>
          </div>
        )}
        {checkData.includes('user_source') && (
          <div className={styles.pie}>
            <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
          </div>
        )}
      </div>
      {checkData.includes('urban_distribution') && (
        <div>
          <CityNums></CityNums>
        </div>
      )}
      {checkData.includes('user_behavior') && (
        <div className={styles.behavior}>
          <UserBehaviorIndex
            tableShow={false}
            endDate={endDate}
            startDate={startDate}
            dataZoom={false}
          ></UserBehaviorIndex>
        </div>
      )}
      <div style={{ display: 'flex' }}>
        {checkData.includes('active_users') && (
          <div className={styles.bar}>
            <UserActive></UserActive>
          </div>
        )}
        {checkData.includes('sex_ratio') && (
          <div className={styles.pie}>
            <UserSex></UserSex>{' '}
          </div>
        )}
      </div>
      <div style={{ display: 'flex' }}>
        {checkData.includes('number_of_new_users') && (
          <div className={styles.bar}>
            <NewUsers endDate={endDate} startDate={startDate} dataZoom={false}></NewUsers>
          </div>
        )}
        {checkData.includes('conversion_rate') && (
          <div className={styles.pie}>
            <UserConversion></UserConversion>{' '}
          </div>
        )}
      </div>

      {checkData.includes('intentional_user') && (
        <div className={styles.customers}>
          <IntentionalCustomers></IntentionalCustomers>
        </div>
      )}
    </>
  );
};

export default indexEcharts;
