// eslint-disable-next-line
import React, { Component } from "react";
import "./SimpleBarGraph.css";

class SimpleBarGraph extends Component {
  toMoney(amount) {
    return ("$" + amount).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  getAmount() {
    if (
      typeof this.props.amountType === "undefined" ||
      this.props.amountType === "money"
    ) {
      return ("$" + this.props.amount)
        .toString()
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    } else {
      return this.props.amount;
    }
  }

  toBarClass(tag) {
    if (tag === "approved") return "bar bar-approved";
    if (tag === "declined") return "bar bar-declined";
    if (tag === "refunded") return "bar bar-refunded";
    if (tag === "rejected") return "bar bar-rejected";
    if (tag === "chargedback") return "bar bar-chargedback";
    if (tag === "errored") return "bar bar-errored";
  }

  render() {
    return (
      <div className="simple-bar-graph">
        <div className="simple-bar-graph-info">
          <p className="simple-bar-graph-desc">{this.props.description}</p>
          <p className="simple-bar-graph-amount">
            {" "}
            <span>{this.props.total}</span> <span>{this.getAmount()}</span>
          </p>
        </div>
      </div>
    );
  }
}

export default SimpleBarGraph;