import { Skeleton, Statistic, Space, Tooltip } from "antd";
import { WarningOutlined } from "@ant-design/icons";

import React, { useCallback } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectSelectedJobTargetPc } from "../../../redux/application/application.selectors";
import { CalculateJobRpsDollars, CalculateJobRpsPc } from "../../../util/CalculateJobRps";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
import { WhichMPIRulesetToApply } from "../../../util/constants";
import { selectBodyshop } from "../../../redux/user/user.selectors";
import { getDecimalPrecision } from "../../../util/decimalPrecision";

const mapStateToProps = createStructuredSelector({
  selectedJobTargetPc: selectSelectedJobTargetPc,
  bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsTargetsStatsMolecule);

export function JobsTargetsStatsMolecule({ loading, job, selectedJobTargetPc, bodyshop }) {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const { actPriceSum, jobRpsDollars } = useCallback(CalculateJobRpsDollars(job, true, bodyshop.mpi_count_quantity), [
    job,
    CalculateJobRpsDollars
  ]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const { dbPriceSum, jobRpsPc } = useCallback(
    CalculateJobRpsPc(job, jobRpsDollars, true, bodyshop.mpi_count_quantity),
    [job, jobRpsDollars, CalculateJobRpsPc]
  );

  if (loading) return <Skeleton active />;
  if (!job)
    return <ErrorResultAtom title="Error displaying job." errorMessage="It looks like this job doesn't exist." />;

  const targetRpsDollars = dbPriceSum.percentage(selectedJobTargetPc * 100);
  const dollarDiff = jobRpsDollars.subtract(targetRpsDollars);
  const MPIRulesetToApply = WhichMPIRulesetToApply(job.close_date);
  const precision = getDecimalPrecision();
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-around"
        //marginTop: "2rem",
        //marginBottom: "1rem"
      }}
    >
      <Space>
        <Statistic
          title="Target RPS %"
          value={(selectedJobTargetPc * 100).toFixed(precision)}
          suffix={
            <Space size="small">
              %
              {MPIRulesetToApply === "V3" && job.v_mileage < 20000 && (
                <Tooltip title="Vehicle is under 20,000 KMs. No expected savings.">
                  <WarningOutlined style={{ color: "seagreen" }} />
                </Tooltip>
              )}
              {bodyshop.ins_rule_set === "SGI" && job.sgi_rcc && (
                <Tooltip title="This claim has replacement cost coverage. No expected savings.">
                  <WarningOutlined style={{ color: "seagreen" }} />
                </Tooltip>
              )}
            </Space>
          }
          style={{ margin: "0rem .5rem" }}
        />
        <Statistic
          title="Current RPS %"
          style={{ margin: "0rem .5rem" }}
          valueStyle={{
            color: selectedJobTargetPc > (jobRpsPc || 0) ? "tomato" : "seagreen"
          }}
          value={((jobRpsPc || 0) * 100).toFixed(precision)}
          suffix="%"
        />
      </Space>
      <Space>
        <Statistic title="Target RPS $" style={{ margin: "0rem .5rem" }} value={targetRpsDollars.toFormat()} />
        <Statistic title="Current RPS $" style={{ margin: "0rem .5rem" }} value={jobRpsDollars.toFormat()} />
        <Statistic
          title="Diff."
          style={{ margin: "0rem .5rem" }}
          valueStyle={{
            color: dollarDiff && dollarDiff.getAmount() <= 0 ? "tomato" : "seagreen"
          }}
          value={dollarDiff && dollarDiff.toFormat()}
        />
      </Space>
      <Space>
        <Statistic title="DB Price Total" style={{ margin: "0rem .5rem" }} value={dbPriceSum.toFormat()} />
        <Statistic title="Actual Price Total" style={{ margin: "0rem .5rem" }} value={actPriceSum.toFormat()} />
      </Space>
    </div>
  );
}
