import moment from 'moment';
import { useEffect, useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { Col, Row } from 'reactstrap';
import { DashboardDronList } from '../../../components/dashboard/DashboardDronList';
import { DashboardGroupList } from '../../../components/dashboard/DashboardGroupList';
import { DashboardMenu } from '../../../components/dashboard/DashboardMenu';
import { DashboardStcsArea } from '../../../components/dashboard/DashboardStcsArea';
import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay';
import * as Actions from '../../../modules/main/dash/actions/mainDashAction';
import { store } from '../../../redux/storeConfig/store';

export const MainDashContainer = () => {
  const dispatch = useDispatch();
  const { stcsDayList, stcsAreaList, groupList, dronList } = useSelector(
    state => state.mainDashState
  );

  const history = useHistory();

  const { user, isLogin } = useSelector(state => state.authState, shallowEqual);

  const [dayStartDate, setDayStartDate] = useState(new Date());

  const [areaStartDate, setAreaStartDate] = useState(new Date());

  const handlerStcsDaySearch = date => {
    dispatch(
      Actions.STCS_DAY.request({
        yyyymm: moment(date).format('YYYY-MM')
      })
    );
  };

  const handlerStcsAreaSearch = date => {
    dispatch(
      Actions.STCS_AREA.request({
        yyyymm: moment(date).format('YYYY-MM')
      })
    );
  };

  const handlerGroupSearch = () => {
    dispatch(
      Actions.GROUP_LIST.request({
        cstmrSno: user?.cstmrSno
      })
    );
  };

  const handlerDronSearch = () => {
    dispatch(
      Actions.DRON_LIST.request({
        cstmrSno: user?.cstmrSno
      })
    );
  };

  const handlerStcsDayParam = date => {
    setDayStartDate(date);
    handlerStcsDaySearch(date);
  };

  const handlerStcsAreaParam = date => {
    setAreaStartDate(date);
    handlerStcsAreaSearch(date);
  };

  const handlerDronDetail = () => {
    history.push('/basis/dron/index');
  };

  const handlerGroupDetail = () => {
    history.push('/basis/group/index');
  };

  const movePage = url => {
    history.push(url);
  };
  useEffect(() => {
    handlerStcsDaySearch(dayStartDate);
    handlerStcsAreaSearch(areaStartDate);
    handlerGroupSearch();
    handlerDronSearch();
  }, []);

  useEffect(() => {}, [stcsDayList]);

  return (
    <div className='main-dashboard'>
      <DashboardMenu movePage={movePage} />
      <div className='dashboard-section'>
        <Row>
          <Col lg={8} md={12} className='dashboard-chart'>
            <DashboardStcsDay
              startDate={dayStartDate}
              setStartDate={handlerStcsDayParam}
              data={stcsDayList}
            />
          </Col>

          <Col lg={4} md={12} className='dashboard-chart'>
            <DashboardStcsArea
              startDate={areaStartDate}
              setStartDate={handlerStcsAreaParam}
              data={stcsAreaList}
            />
          </Col>
        </Row>
      </div>
      <div className='dashboard-section'>
        <Row>
          <Col md={6}>
            <DashboardGroupList
              data={groupList}
              pageMove={handlerGroupDetail}
            />
          </Col>
          <Col md={6}>
            <DashboardDronList data={dronList} pageMove={handlerDronDetail} />
          </Col>
        </Row>
      </div>
    </div>
  );
};