import moment from 'moment';
import React, { useEffect } from 'react';
import { Tab, Tabs } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import DataVolumeStatisticsPanel from '../components/ManagerStats/DataVolumeManagerStats/DataVolumeStatisticsPanel';
import GeneralStatsPanel from '../components/ManagerStats/GeneralStats/GeneralStatsPanel';

function DataStatisticsPage() {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setBreadCrumbs([{ name: 'Data Statistics' }]));
  }, [dispatch]);

  return (
    <div className="app__inner">
      <Tabs id="uncontrolled-tab-example" defaultActiveKey={1}>
        <Tab eventKey={1} title="Today">
          <GeneralStatsPanel
            user={user}
            start={moment().format(moment.HTML5_FMT.DATE)}
            end={moment().add(1, 'days').format(moment.HTML5_FMT.DATE)}
            name=""
          />
        </Tab>
        <Tab eventKey={2} title="Last week">
          <GeneralStatsPanel
            user={user}
            start={moment().subtract(7, 'days').format(moment.HTML5_FMT.DATE)}
            end={moment().add(1, 'days').format(moment.HTML5_FMT.DATE)}
            name=""
          />
        </Tab>
        <Tab eventKey={3} title="All">
          <GeneralStatsPanel
            user={user}
            start="2014-01-01"
            end="2024-01-01"
            name="From 2024-01-01"
          />
        </Tab>
        <Tab eventKey={4} title="Data produced and released">
          <DataVolumeStatisticsPanel user={user} />
        </Tab>
      </Tabs>
    </div>
  );
}

export default DataStatisticsPage;
