import { Card } from "antd";
import Dinero from "dinero.js";
import { round } from "lodash";
import dayjs from "../../utils/day";
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 CustomTooltip from "./chart-custom-tooltip";

const graphProps = {
  strokeWidth: 3
};

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

const mapDispatchToProps = () => ({
  //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,
            sales: dayAcc.sales + dayVal.job.job_totals.totals.subtotal.amount / 100
          };
        },
        { bodyhrs: 0, painthrs: 0, sales: 0 }
      );
    } else {
      dayhrs = {
        bodyhrs: 0,
        painthrs: 0,
        sales: 0
      };
    }

    const theValue = {
      date: dayjs(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
        ) +
          bodyshop.scoreboard_target.dailyBodyTarget +
          bodyshop.scoreboard_target.dailyPaintTarget,
        1
      ),
      accHrs: round(
        acc.length > 0
          ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
          : dayhrs.painthrs + dayhrs.bodyhrs,
        1
      ),
      sales: round(dayhrs.sales, 2),
      accSales: round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
    };

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

  return (
    <Card>
      <ResponsiveContainer width="100%" height={475} minHeight={100}>
        <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}
            // allowDataOverflow
            dataKey="sales"
            yAxisId="right"
            tickFormatter={(value) => Dinero({ amount: Math.round(value * 100) }).toFormat()}
            orientation="right"
          />
          <YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
          <Tooltip content={<CustomTooltip />} />
          <Legend />

          <Bar name="Body Hours" dataKey="bodyHrs" stackId="day" barSize={20} fill="darkblue" yAxisId="left" />
          <Bar name="Paint Hours" dataKey="paintHrs" stackId="day" barSize={20} fill="darkred" yAxisId="left" />
          <Line
            name="Target Hours"
            type="monotone"
            dataKey="accTargetHrs"
            stroke="#ff7300"
            yAxisId="left"
            strokeWidth={graphProps.strokeWidth}
          />

          <Area type="monotone" name="MTD Hours" dataKey="accHrs" fill="lightblue" stroke="blue" yAxisId="left" />
          {
            //  <Area
            //         type="monotone"
            //         name="MTD Sales"
            //         dataKey="accSales"
            //         fill="lightgreen"
            //         stroke="green"
            //         yAxisId="right"
            //       />
          }
          <Bar
            name="Sales"
            dataKey="sales"
            stackId="day"
            barSize={20}
            fill="darkgreen"
            yAxisId="right"
            strokeWidth={graphProps.strokeWidth}
          />
        </ComposedChart>
      </ResponsiveContainer>
    </Card>
  );
}
