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

export default class CourseHistoryList extends Component {
  constructor(props) {
    super(props);
  }

  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    return {
      muiTheme: theme,
    };
  }

  render() {
    const { courses, gpa, termName } = this.props;
    const filterItems = Array.isArray(courses) && courses !== undefined && courses.length > 0 ?
      courses.sort((a, b) => {
        return a.subject > b.subject ? 1 : a.subject < b.subject ? -1 : 0;
      }).map((item, counter) => (
        <CourseHistoryListItem
          key={`course-history-${counter}`}
          title={item.title}
          subject={item.subject}
          number={item.number}
          section={item.section}
          units={item.units}
          grade={item.grade}
        />
      ))
       : <tr><td colSpan="4">There were no classes returned for this term.</td></tr>;
    return (
      <div style={{ overflowX: 'auto' }}>
        <table className="past">
          <tbody>
            <tr>
              <td colSpan="6">{termName}</td>
            </tr>
            <tr colSpan="12" style={{fontSize:"12px"}}>
              <th>Subject</th>
              <th>Number</th>
              <th>Title</th>
              <th>Units</th>
              <th>Grade</th>
            </tr>
            {filterItems}
            <tr>
              <td className="gpa" colSpan="12" style={{fontSize:"12px"}}>
                {gpa !== undefined && gpa !== '' ? `Semester GPA ${numeral(gpa).format('0.000')}` : 'NA' }
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}
CourseHistoryList.propTypes = {
  courses: PropTypes.array,
  gpa: PropTypes.string,
  termName: PropTypes.string,
  termBeginDate: PropTypes.string,
  termEndDate: PropTypes.string,
};

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