import { Card } from "antd";
import moment from "moment";
import React from "react";
import { connect } from "react-redux";
import {
  Area,
  Bar,
  CartesianGrid,
  ComposedChart,
  Legend,
  Line,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
import _ from "lodash";

const graphProps = {
  strokeWidth: 3,
};

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart);

export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
  const listOfBusDays = Utils.ListOfDaysInCurrentMonth();

  const data = listOfBusDays.reduce((acc, val) => {
    //Sum up the current day.
    let dayhrs;
    if (!!sbEntriesByDate[val]) {
      dayhrs = sbEntriesByDate[val].reduce(
        (dayAcc, dayVal) => {
          return {
            bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
            painthrs: dayAcc.painthrs + dayVal.painthrs,
          };
        },
        { bodyhrs: 0, painthrs: 0 }
      );
    } else {
      dayhrs = {
        bodyhrs: 0,
        painthrs: 0,
      };
    }

    const theValue = {
      date: moment(val).format("D ddd"),
      paintHrs: _.round(dayhrs.painthrs, 1),
      bodyHrs: _.round(dayhrs.bodyhrs, 1),
      accTargetHrs: _.round(
        Utils.AsOfDateTargetHours(
          bodyshop.scoreboard_target.dailyBodyTarget +
            bodyshop.scoreboard_target.dailyPaintTarget,
          val
        ),
        1
      ),
      accHrs: _.round(
        acc.length > 0
          ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
          : dayhrs.painthrs + dayhrs.bodyhrs,
        1
      ),
    };

    return [...acc, theValue];
  }, []);

  return (
    <Card>
      <ResponsiveContainer width="100%" height={475}>
        <ComposedChart
          data={data}
          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
        >
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
          <YAxis strokeWidth={graphProps.strokeWidth} />
          <Tooltip />
          <Legend />
          <Area
            type="monotone"
            name="Accumulated Hours"
            dataKey="accHrs"
            fill="lightgreen"
            stroke="green"
          />
          <Bar
            name="Body Hours"
            dataKey="bodyHrs"
            stackId="day"
            barSize={20}
            fill="darkblue"
          />
          <Bar
            name="Paint Hours"
            dataKey="paintHrs"
            stackId="day"
            barSize={20}
            fill="darkred"
          />
          <Line
            name="Target Hours"
            type="monotone"
            dataKey="accTargetHrs"
            stroke="#ff7300"
            strokeWidth={graphProps.strokeWidth}
          />
        </ComposedChart>
      </ResponsiveContainer>
    </Card>
  );
}
