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

export default class CourseHistoryTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTerms: this.props.initialTerms,
    };

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

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

  handleTermChange(event, index, value) {
    this.setState({ selectedTerms: value !== undefined && value !== null ? [value] : [] });
  }

  render() {
    const { terms } = this.props;
    const { selectedTerms } = this.state;
    const filteredTerms = selectedTerms.length >= 1
      ? terms.filter(term => selectedTerms.indexOf(term.termId) > -1)
      : terms;

    return (
      <div>
        {terms.length > 1 ?
          <div className="selectWrapper">
            <SelectField
              value={selectedTerms.length === 1 ? selectedTerms[0] : selectedTerms.length === 0 ? null : selectedTerms}
              labelStyle={{ color: 'white' }}
              onChange={this.handleTermChange}
              fullWidth
            >
              <MenuItem value={null} primaryText="All Terms" />
              {
                terms.map((item, counter) => (
                  <MenuItem
                    key={`term-select-${counter}`}
                    value={item.termId}
                    primaryText={item.termName}
                  />
                ))
              }
            </SelectField>
          </div>
          : undefined}
        {filteredTerms
          .sort((a, b) => (
             a.termBeginDate < b.termBeginDate
              ? 1
              : a.termBeginDate > b.termBeginDate ? -1
              : 0
          ))
          .map((item, counter) => (
            <CourseHistoryList
              key={`course-history-${counter}`}
              termName={item.termName}
              termBeginDate={item.termBeginDate}
              termEndDate={item.termEndDate}
              courses={item.courses}
              gpa={item.gpa}
            />
          ),
        )}
      </div>
    );
  }
}

CourseHistoryTab.propTypes = {
  initialTerms: PropTypes.array,
  terms: PropTypes.array,
};
CourseHistoryTab.defaultProps = {
  initialTerms: [],
  terms: [],
};
CourseHistoryTab.childContextTypes = {
  muiTheme: PropTypes.object,
};