import { Card, Divider, Statistic } from "antd";
import dayjs from "../../utils/day";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function ScoreboardDayStats({ bodyshop, date, entries }) {
  const { dailyPaintTarget, dailyBodyTarget } = bodyshop.scoreboard_target;

  //let totalHrs = 0;
  const paintHrs = entries.reduce((acc, value) => {
    // totalHrs = +value.painthrs;
    return acc + value.painthrs;
  }, 0);

  const bodyHrs = entries.reduce((acc, value) => {
    //totalHrs = +value.bodyhrs;
    return acc + value.bodyhrs;
  }, 0);

  const numJobs = entries.length;

  return (
    <Card title={dayjs(date).format("D - ddd")} className="ant-card-grid-hoverable" style={{ height: "100%" }}>
      <Statistic
        styles={{ content: { color: dailyBodyTarget > bodyHrs ? "red" : "green" } }}
        label="Body"
        value={bodyHrs.toFixed(1)}
      />
      <Statistic
        styles={{ content: { color: dailyPaintTarget > paintHrs ? "red" : "green" } }}
        label="Refinish"
        value={paintHrs.toFixed(1)}
      />
      <Divider style={{ margin: 0 }} />
      <Statistic label="Total" value={(bodyHrs + paintHrs).toFixed(1)} />
      <Divider style={{ margin: 0 }} />
      <Statistic label="Jobs" value={numJobs} />
    </Card>
  );
}

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