import React from 'react';
import { inject, observer } from 'mobx-react';

const StatusColorMapping = {
  OK: '#1C9063',
  NOT_READY: '#B43131',
  NOT_PRESENT: '#B43131',
  ERR: '#B43131',
  UNDEF: '#B43131',
};

@observer
export default class StatusDisplay extends React.Component {
  constructor(props) {
    super(props);

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

  showStatusMessage() {
    if (this.props.status.message) {
      alert(`${this.props.title}: ${this.props.status.message}`);
    } else {
      alert(`No message from ${this.props.title}`);
    }
  }

  render() {
    const { title, status } = this.props;
    const status_code = status.status;

    return (
            <div className="status-display">
                <div className="name">{title}</div>
                <div className="status" onClick={this.showStatusMessage}>
                    <span>{status_code}</span>
                    <span
                        className="status-icon"
                        style={{
                          backgroundColor: StatusColorMapping[status_code],
                        }}
                    />
                </div>
            </div>
    );
  }
}