import { Card, Space, Statistic } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../../redux/user/user.selectors";
import DashboardRefreshRequired from "../refresh-required.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({});
export default connect(mapStateToProps, mapDispatchToProps)(DashboardTotalProductionHours);

export function DashboardTotalProductionHours({ bodyshop, data, ...cardProps }) {
  const { t } = useTranslation();
  if (!data) return null;
  if (!data.production_jobs) return <DashboardRefreshRequired {...cardProps} />;
  const hours =
    data.production_jobs &&
    data.production_jobs.reduce(
      (acc, val) => {
        return {
          body: acc.body + val.labhrs.aggregate.sum.mod_lb_hrs,
          ref: acc.ref + val.larhrs.aggregate.sum.mod_lb_hrs,
          total: acc.total + val.labhrs.aggregate.sum.mod_lb_hrs + val.larhrs.aggregate.sum.mod_lb_hrs
        };
      },
      { body: 0, ref: 0, total: 0 }
    );
  const aboveTargetHours = hours.total >= bodyshop.prodtargethrs;
  return (
    <Card {...cardProps} title={t("dashboard.titles.prodhrssummary")}>
      <Space wrap style={{ flex: 1 }}>
        <Statistic title={t("dashboard.labels.bodyhrs")} value={hours.body.toFixed(1)} />
        <Statistic title={t("dashboard.labels.refhrs")} value={hours.ref.toFixed(1)} />
        <Statistic
          title={t("dashboard.labels.prodhrs")}
          value={hours.total.toFixed(1)}
          styles={{ content: { color: aboveTargetHours ? "green" : "red" } }}
        />
      </Space>
    </Card>
  );
}

export const DashboardTotalProductionHoursGql = ``;
