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

import './CourseHistory.css';

const { object } = PropTypes;

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

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

  toUpperFirstLetter(str) {
    let wordArray = str.toLowerCase().split(' ');
    let formattedTitle = wordArray.map((item) => {
      let allCaps = ['i','ii','iii','iv','x'];
      let allLow = ['to','a','and'];

      if (allCaps.indexOf(item) > -1){
        return item.toUpperCase();
      } else if(allLow.indexOf(item) > -1) {
        return item;
      } else {
        return item.charAt(0).toUpperCase() + item.substring(1);
      }
    });

    return formattedTitle.join(' ');
  }

  render() {
    const { title, subject, number, section, units, grade } = this.props;
    return (
      <tr>
        <td>{subject}</td>
        <td>{number}</td>
        <td>{this.toUpperFirstLetter(title)}</td>
        <td>{units}</td>
        <td>{grade}</td>
      </tr>
    );
  }
}

CourseHistoryListItem.propTypes = {
  title:PropTypes.string,
  subject:PropTypes.string,
  number:PropTypes.string,
  section:PropTypes.string,
  units:PropTypes.string,
  grade:PropTypes.string,
};

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