import dayjs from "../../utils/day";
import { useMemo } from "react";
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 default connect(mapStateToProps, mapDispatchToProps)(ProductionlistColumnTouchTime);

export function ProductionlistColumnTouchTime({ bodyshop, job }) {
  let ct = useMemo(() => {
    if (job.actual_in) {
      const totalHrs = (job.larhrs.aggregate.sum.mod_lb_hrs || 0) + (job.labhrs.aggregate.sum.mod_lb_hrs || 0);

      const Difference_In_Days = dayjs().diff(dayjs(job.actual_in), "day", true);

      return (totalHrs / Difference_In_Days).toFixed(2);
    }
    return 0;
  }, [job]);

  const underTarget = ct < bodyshop.target_touchtime;

  return <span style={{ color: underTarget && "tomato" }}>{ct}</span>;
}
