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

const mapStateToProps = createStructuredSelector({
  reportingLoading: selectReportLoading,
  scoreCard: selectScorecard,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ReportingTotalsStatsMolecule);

export function ReportingTotalsStatsMolecule({ reportingLoading, scoreCard }) {
  if (reportingLoading) return <Skeleton active />;
  if (!scoreCard)
    return <ErrorResultAtom title="Error displaying score card data." />;

  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(1)}
          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(1)}
          suffix="%"
        />
        <Statistic
          title="RPS Variance %"
          style={{ margin: "0rem .5rem" }}
          valueStyle={{
            color: scoreCard.variancePc < 0 ? "tomato" : "seagreen",
          }}
          value={((scoreCard.variancePc || 0) * 100).toFixed(2)}
          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>
  );
}
