import { Alert, Button, Skeleton, Statistic } from "antd";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { clearExcludedIds } from "../../../redux/reporting/reporting.actions";
import { selectExcludedIds, selectReportLoading, selectScorecard } from "../../../redux/reporting/reporting.selectors";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";

import { getDecimalPrecision } from "../../../util/decimalPrecision";
const mapStateToProps = createStructuredSelector({
  reportingLoading: selectReportLoading,
  scoreCard: selectScorecard,
  excludedJobIds: selectExcludedIds
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
  clearExcludedIds: () => dispatch(clearExcludedIds())
});
export default connect(mapStateToProps, mapDispatchToProps)(ReportingTotalsStatsMolecule);

export function ReportingTotalsStatsMolecule({ reportingLoading, scoreCard, excludedJobIds, clearExcludedIds }) {
  if (reportingLoading) return <Skeleton active />;
  if (!scoreCard) return <ErrorResultAtom title="Error displaying score card data." />;
  const precision = getDecimalPrecision();
  return (
    <>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-around",
          marginTop: "1rem",
          marginBottom: "1rem"
        }}
      >
        <div style={{ display: "flex" }}>
          <Statistic
            title="Target RPS %"
            style={{ margin: "0rem .5rem" }}
            value={((scoreCard.targetRpsPc || 0) * 100).toFixed(precision)}
            suffix="%"
          />
          <Statistic
            title="Current RPS %"
            style={{ margin: "0rem .5rem" }}
            valueStyle={{
              color: (scoreCard.currentRpsPc || 0) <= (scoreCard.targetRpsPc || 0) ? "tomato" : "seagreen"
            }}
            value={((scoreCard.currentRpsPc || 0) * 100).toFixed(precision)}
            suffix="%"
          />
          <Statistic
            title="RPS Variance %"
            style={{ margin: "0rem .5rem" }}
            valueStyle={{
              color: scoreCard.variancePc < 0 ? "tomato" : "seagreen"
            }}
            value={((scoreCard.variancePc || 0) * 100).toFixed(precision)}
            suffix="%"
          />
        </div>
        <div style={{ display: "flex" }}>
          <Statistic
            title="Target RPS $"
            style={{ margin: "0rem .5rem" }}
            value={scoreCard.shopRpsExpectedDollars.toFormat()}
          />
          <Statistic
            title="Current RPS $"
            style={{ margin: "0rem .5rem" }}
            value={scoreCard.shopRpsTotalDollars.toFormat()}
          />
          <Statistic
            title="RPS Variance $"
            style={{ margin: "0rem .5rem" }}
            valueStyle={{
              color: scoreCard.varianceDollars.getAmount() < 0 ? "tomato" : "seagreen"
            }}
            value={scoreCard.varianceDollars.toFormat()}
          />
        </div>
      </div>
      {excludedJobIds.length > 0 && (
        <Alert
          type="warning"
          action={
            <Button size="small" danger onClick={() => clearExcludedIds()}>
              Clear
            </Button>
          }
          message={`There ${excludedJobIds.length == 1 ? "is" : "are"} ${excludedJobIds.length} job${
            excludedJobIds.length > 1 ? "s" : ""
          } excluded from the totals above.`}
        />
      )}
    </>
  );
}
