import { Card, Typography } from "antd";
import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { setSelectedJobId } from "../../../redux/application/application.actions";
import { selectDates, selectReportingError } from "../../../redux/reporting/reporting.selectors";
import ReportingTitleAtom from "../../atoms/reporting-title/reporting-title.atom";
import ReportingDatesMolecule from "../../molecules/reporting-dates/reporting-dates.molecule";
import ReportingJobsListMolecule from "../../molecules/reporting-jobs-list/reporting-jobs-list.molecule";
import ReportingScatterChartMolecule from "../../molecules/reporting-scatterchart/reporting-scatterchart.molecule";
import ReportingTotalsStatsMolecule from "../../molecules/reporting-totals-stats/reporting-totals-stats.molecule";
import "./reporting.page.styles.scss";

const mapStateToProps = createStructuredSelector({
  dates: selectDates,
  error: selectReportingError
});
const mapDispatchToProps = (dispatch) => ({
  setSelectedJobId: (id) => dispatch(setSelectedJobId(id))
});

export function ReportingPage({ dates, error, setSelectedJobId }) {
  return (
    <div className="reporting-container">
      <Card>
        <ReportingDatesMolecule />
      </Card>
      {error && (
        <div>
          <Typography.Title level={4}>{error.message}</Typography.Title>
          <ul>
            {error.jobs.map((j, idx) => (
              <li key={idx}>
                <Link onClick={() => setSelectedJobId(j.id)} to={"/"}>
                  {`${j.clm_no} - ${j.error}`}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
      {!error && dates && dates.startDate && dates.endDate && (
        <div className="reporting-cards">
          <Card>
            <ReportingTitleAtom />
            <ReportingTotalsStatsMolecule />
          </Card>
          <Card>
            <ReportingJobsListMolecule />
          </Card>
          <Card>
            <ReportingScatterChartMolecule />
          </Card>
        </div>
      )}
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ReportingPage);
