import React from 'react';
import { Link } from 'react-router';
import moment from 'moment';
import _ from 'lodash';
import Separator from '../../../components/Separator';
import './EventList.scss';
import signupState from '../../../utils/signupStateText';
import allTimesMatch from '../../../utils/allTimesMatch';

class TableRow extends React.Component {
  render() {
    const { title, link, date, signupLabel, going, size, className } = this.props;

    return (
      <tr className={className}>
        <td key="title" className="title">{ link ? <Link to={link}>{title}</Link> : title }</td>
        <td key="date" className="date">{ date ? moment(date).format('DD.MM.YYYY') : '' }</td>
        <td key="signup" className="signup" data-xs-prefix={signupLabel ? 'Ilmoittautuminen ' : ''}>{signupLabel}</td>
        <td key="going" className="going" data-xs-prefix={going || size ? 'Ilmoittautuneita: ' : ''}>
          { going || '' }{ size ? <Separator /> : '' }{ size || ''}
        </td>
      </tr>
    );
  }
}

/* Render the list container
*/

class EventList extends React.Component {
  componentWillMount() {
    this.props.getEventList();
  }

  render() {
    const sortFunction = (event) => {
      const now = moment();

      switch (true) {
        case now.isAfter(moment(event.date)) : // First upcoming events
          return 2;
        case _.isEmpty(event.date) : // Then events without date
          return 1;
        default: // Last events that are over
          return 0;
      }
    };

    const eventsSorted = _.sortBy(this.props.eventList, [sortFunction, 'date', 'title']);

    const tableRows = eventsSorted.map((event) => {
      // If every quota has same registration start/end time, show that time only once
      const showOneLabel = allTimesMatch(event.quotas);

      const eventState = signupState(event.date, event.quotas[0].signupOpens, event.quotas[0].signupCloses);

      const rows = [
        <TableRow
          title={event.title}
          link={`/event/${event.id}`}
          date={event.date}
          signupLabel={showOneLabel ? eventState.label : ''}
          going={_.sumBy(event.quotas, 'going')}
          size={_.sumBy(event.quotas, 'size')}
          className={eventState.class}
          key={`e${event.id}`} />,
      ];

      if (event.quotas.length > 1) {
        event.quotas.map((quota, i) => {
          const quotaState = signupState(event.date, quota.signupOpens, quota.signupCloses);
          return rows.push(
            <TableRow
              title={quota.title}
              signupLabel={!showOneLabel ? quotaState.label : ''}
              going={quota.going}
              size={quota.size}
              className={`${eventState.class} ${quotaState.class} child`}
              key={`q${i}`} />,
          );
        });
      }

      return rows;
    });

    return (
      <div className="container">
        <h1>Tapahtumat</h1>
        <table className="table eventlist">
          <thead>
            <tr>
              <th>Nimi</th>
              <th>Ajankohta</th>
              <th>Ilmoittautuminen</th>
              <th>Ilmoittautuneita</th>
            </tr>
          </thead>
          <tbody>{tableRows}</tbody>
        </table>
      </div>
    );
  }

}

TableRow.propTypes = {
  title: React.PropTypes.string.isRequired,
  date: React.PropTypes.string,
  link: React.PropTypes.string,
  signupLabel: React.PropTypes.string,
  className: React.PropTypes.string,
  going: React.PropTypes.number,
  size: React.PropTypes.number,
};

EventList.propTypes = {
  eventList: React.PropTypes.array,
  getEventList: React.PropTypes.func.isRequired,
};

export default EventList;

@@ -1240,105 +1240,75 @@
     
-switch (true) %7B%0A        case now.isAfter(moment(event.date)) : // First upcoming events%0A         
+// First upcoming events%0A      if (now.isAfter(moment(event.date)))
  ret
@@ -1318,44 +1318,14 @@
  2;%0A
-  
+%0A
      
- case _.isEmpty(event.date) :
  // 
@@ -1351,27 +1351,50 @@
  date%0A      
-   
+if (_.isEmpty(event.date))
  return 1;%0A 
@@ -1396,29 +1396,27 @@
  1;%0A
+%0A
       
-  d
+// D
 efault
-: // L
+ l
 ast 
@@ -1438,28 +1438,24 @@
  over%0A      
-   
- 
 return 0;%0A  
@@ -1452,24 +1452,16 @@
 turn 0;%0A
-      %7D%0A
     %7D;%0A%0A

Switch -> if