import { AlertFilled } from "@ant-design/icons";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectSelectedJobTargetPc } from "../../../redux/application/application.selectors";
import { selectBodyshop } from "../../../redux/user/user.selectors";
import "./price-diff-pc-formatter.styles.scss";
import { getDecimalPrecision } from "../../../util/decimalPrecision";

const mapStateToProps = createStructuredSelector({
  selectedJobTargetPc: selectSelectedJobTargetPc,
  bodyshop: selectBodyshop
});

export function PriceDiffPcFormatterAtom({ bodyshop, price_diff_pc, selectedJobTargetPc }) {
  const precision = getDecimalPrecision();
  return (
    <div
      style={{
        color: price_diff_pc > selectedJobTargetPc ? "green" : "red",
        display: "flex",
        alignItems: "center"
      }}
    >
      {(price_diff_pc * 100).toFixed(precision)}%
      {price_diff_pc === 1 || (price_diff_pc <= bodyshop.ppd_diff_alert && price_diff_pc > 0) ? (
        <AlertFilled style={{ color: "tomato" }} className="blink_me" />
      ) : null}
    </div>
  );
}
export default connect(mapStateToProps, null)(PriceDiffPcFormatterAtom);
