import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import {
  TRANSACTION_CREATED_EVENT,
  TRANSACTION_SUBMITTED_EVENT,
  TRANSACTION_RESUBMITTED_EVENT,
  TRANSACTION_CONFIRMED_EVENT,
  TRANSACTION_DROPPED_EVENT,
  TRANSACTION_ERRORED_EVENT,
  TRANSACTION_CANCEL_ATTEMPTED_EVENT,
  TRANSACTION_CANCEL_SUCCESS_EVENT,
} from '../transaction-activity-log.constants';

const imageHash = {
  [TRANSACTION_CREATED_EVENT]: '/images/icons/new.svg',
  [TRANSACTION_SUBMITTED_EVENT]: '/images/icons/submitted.svg',
  [TRANSACTION_RESUBMITTED_EVENT]: '/images/icons/retry.svg',
  [TRANSACTION_CONFIRMED_EVENT]: '/images/icons/confirm.svg',
  [TRANSACTION_DROPPED_EVENT]: '/images/icons/cancelled.svg',
  [TRANSACTION_ERRORED_EVENT]: '/images/icons/error.svg',
  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: '/images/icons/cancelled.svg',
  [TRANSACTION_CANCEL_SUCCESS_EVENT]: '/images/icons/cancelled.svg',
};

export default class TransactionActivityLogIcon extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
  };

  static propTypes = {
    className: PropTypes.string,
    eventKey: PropTypes.oneOf(Object.keys(imageHash)),
  };

  render() {
    const { className, eventKey } = this.props;
    const imagePath = imageHash[eventKey];

    return (
      <div className={classnames('transaction-activity-log-icon', className)}>
        {imagePath && <img src={imagePath} height="9" width="9" alt="" />}
      </div>
    );
  }
}