import React from 'react';
import { map } from 'lodash';

import Table from '../Table';
import './history-modal.scss';

class HistoryModal extends React.Component {
  constructor() {
    super();

    this.state = {
      quantity: null
    };

    this.onUpdate = this.onUpdate.bind(this);
    this.parseEventData = this.parseEventData.bind(this);
  }

  onUpdate(event) {
    this.setState({ quantity: event.target.value });
  }

  parseEventData(events) {
    var eventsWithChange = [];

    for(var i = 0; i < events.length; i++) {
      var current = events[i];
      var next = events[i+1];

      if (next) {
        if (current.content.quantity != next.content.quantity || current.content.why_participated != next.content.why_participated || current.content.quantity_pending != next.content.quantity_pending) {
          // If there is a difference in the record, add to the log.
          eventsWithChange.push(current);
        }
      }
    }

    // Always include the first event in the response
    // so there is something in the table.
    // @TODO: change this when we start paginating.
    eventsWithChange.push(events[events.length-1]);

    return eventsWithChange;
  }

  render() {
    const signup = this.props.signup;
    const campaign = this.props['campaign'];
    const parsedEvents = this.parseEventData(this.props.signupEvents);

    return (
      <div className="modal">
        <a href="#" onClick={this.props.onClose} className="modal-close-button">&times;</a>
        <div className="modal__block">
          <h3>Change Quantity</h3>
          <div className="container__block -half">
            <h4>Old Quantity</h4>
            <p>{signup['quantity']} {campaign['reportback_info']['noun']} {campaign['reportback_info']['verb']}</p>
          </div>
          <div className="container__block -half">
            <h4>New Quantity</h4>
            <div className="form-item">
              <input type="text" onChange={this.onUpdate} className="text-field" placeholder="Enter # here"/>
            </div>
          </div>

          <h3>📖 History 📖</h3>
          <p>Below shows the 20 most recent changes to the member's signup. This includes changes to the quantity or why. If you need changes beyond the 20 listed here, please reach out to Team Bleed!</p>
          <div className="container">
            <Table headings={['Quantity','Why Participated','Updated At','User']} data={parsedEvents} type='events' />
          </div>
        </div>
        <button className="button -history" disabled={!this.state.quantity} onClick={() => this.props.onUpdate(signup, this.state.quantity)}>Save</button>
      </div>
    );
  }
}

export default HistoryModal;

@@ -49,16 +49,52 @@
 lodash';
+%0Aimport PropTypes from 'prop-types';
 %0A%0Aimport
@@ -1306,18 +1306,17 @@
 rops
-%5B'
+.
 campaign
 '%5D;%0A
@@ -1311,18 +1311,16 @@
 campaign
-'%5D
 ;%0A    co
@@ -2688,19 +2688,392 @@
  );%0A  %7D%0A
-
 %7D%0A%0A
+HistoryModal.propTypes = %7B%0A  campaign: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types%0A  onClose: PropTypes.func.isRequired,%0A  onUpdate: PropTypes.func.isRequired,%0A  signup: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types%0A  signupEvents: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types%0A%7D;%0A%0A
 export d

Add proptype validation to HistoryModal