import React from "react";
import { TRANSACTION_STATUSES } from "../enums/transactions";

const { AWAITING_PROCESS, PROCESSING, PROCESSED } = TRANSACTION_STATUSES;

const STATUS_MAP = {
  "Awaiting Process": AWAITING_PROCESS,
  Processing: PROCESSING,
  Processed: PROCESSED
};

export default class TransactionStatusDropdown extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.props.onChange(event.target.value);
  }

  render() {
    return (
      <div className="bp3-select bp3-fill">
        <select
          disabled={this.props.disabled}
          value={this.props.status}
          onChange={this.handleChange}>
          <option value="">Select a status</option>
          {Object.entries(STATUS_MAP).map(([key, value]) => {
            return (
              <option key={value} value={value}>
                {key}
              </option>
            );
          })}
        </select>
      </div>
    );
  }
}