import { Skeleton, Statistic } from "antd";
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";

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

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

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

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

  const targetRpsDollars = dbPriceSum.percentage(selectedJobTargetPc * 100);
  const dollarDiff = jobRpsDollars.subtract(targetRpsDollars);
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-around",
        marginTop: "2rem",
        marginBottom: "1rem",
      }}
    >
      <div style={{ display: "flex" }}>
        <Statistic
          title="Target RPS %"
          value={(selectedJobTargetPc * 100).toFixed(1)}
          suffix="%"
          style={{ margin: "0rem .5rem" }}
        />
        <Statistic
          title="Current RPS %"
          style={{ margin: "0rem .5rem" }}
          valueStyle={{
            color:
              selectedJobTargetPc > (jobRpsPc || 0) ? "tomato" : "seagreen",
          }}
          value={((jobRpsPc || 0) * 100).toFixed(1)}
          suffix="%"
        />
      </div>
      <div style={{ display: "flex" }}>
        <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()}
        />
      </div>
      <div style={{ display: "flex" }}>
        <Statistic
          title="DB Price Total"
          style={{ margin: "0rem .5rem" }}
          value={dbPriceSum.toFormat()}
        />
        <Statistic
          title="Actual Price Total"
          style={{ margin: "0rem .5rem" }}
          value={actPriceSum.toFormat()}
        />
      </div>
    </div>
  );
}
