import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectDates } from "../../../redux/reporting/reporting.selectors";
import ReportingDatesMolecule from "../../molecules/reporting-dates/reporting-dates.molecule";
import ReportingJobsListMolecule from "../../molecules/reporting-jobs-list/reporting-jobs-list.molecule";
import ReportingTotalsStatsMolecule from "../../molecules/reporting-totals-stats/reporting-totals-stats.molecule";

const mapStateToProps = createStructuredSelector({
  dates: selectDates,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ReportingPage);

export function ReportingPage({ dates }) {
  return (
    <div>
      <ReportingDatesMolecule />
      {dates && dates.startDate && dates.endDate && (
        <div>
          <ReportingTotalsStatsMolecule />
          <ReportingJobsListMolecule />
        </div>
      )}
    </div>
  );
}