import React, { Component, PropTypes } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import UCdefaultTheme from '../../themes/DefaultTheme';
import CourseHistoryInProgressListItem from './CourseHistoryInProgressListItem';
import './CourseHistory.css';

export default class CourseHistoryInProgressList extends Component {
  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    return {
      muiTheme: theme,
    };
  }

  render() {
    const { courses, termName } = this.props;
    const filterItems = Array.isArray(courses) && courses !== undefined && courses.length > 0
      ? courses
          .sort((a, b) => a.subject > b.subject ? 1 : a.subject < b.subject ? -1 : 0)
          .map((item, counter) => (
            <CourseHistoryInProgressListItem
              key={`course-history-ip-${counter}`}
              title={item.title}
              subject={item.subject}
              number={item.number}
              section={item.section}
              units={item.units}
              bookLink={item.bookLink}
            />
          ))
      : <tr><td colSpan="6">There were no classes returned for this term.</td></tr>;
    return (
      <table className="past">
        <tbody>
          <tr>
            <td colSpan="6">{termName}</td>
          </tr>
          <tr style={{ boxSizing: 'border-box' }}>
            <th>Subject</th>
            <th>Number</th>
            <th>Title</th>
            <th>Units</th>
            <th>Book</th>
          </tr>
          {filterItems}
        </tbody>
      </table>
    );
  }
}
CourseHistoryInProgressList.propTypes = {
  courses: PropTypes.array,
  termName: PropTypes.string,
  termBeginDate: PropTypes.string,
  termEndDate: PropTypes.string,
};

CourseHistoryInProgressList.childContextTypes = {
  muiTheme: PropTypes.object,
};