import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
const exGrades = [  
  {  
    "assignment_type":"Exam",
    "total_possible":6.0,
    "total_earned":3.0
  },
  {  
    "assignment_type":"Homework",
    "total_possible":5.0,
  },
  {  
    "assignment_type":"Homework",
    "total_possible":11.0,
    "total_earned":0.0
  }
];

class GradeTable extends React.Component {
  constructor(props) {
    super(props);
  }
  
  getTableGroup(type, groupIndex) {
    const {grades} = this.props;
    const groupData = grades.filter(value => {
      if (value['assignment_type'] === type) {
        return value;
      }
    });
    const multipleAssignments = groupData.length > 1;

    const rows = groupData.map(({assignment_type, total_possible, total_earned, passing_grade}, index) => {
      const label = multipleAssignments ? `${assignment_type} ${index + 1}` : assignment_type; 
      return (
        <tr key={index}>
          <td>{label}</td>
          <td>{passing_grade}/{total_possible}</td>
          <td>{total_earned}/{total_possible}</td>
       </tr>
      );
    });

    return rows.length ? <tbody className="type-group" key={groupIndex}>{rows}</tbody> : false;
  }
  
  render() {
    const {assignmentTypes, passingGrade, percentGrade} = this.props;
    return (
      <table className="table grade-table">
        <thead className="table-head">
          <tr>
            <th>Assignment</th>
            <th>Passing</th>
            <th>You</th>
          </tr>
        </thead>
        {assignmentTypes.map((type, index) => this.getTableGroup(type, index))}
        <tfoot>
          <tr className="totals">
            <td className="footer-label">Total</td>
            <td>{passingGrade}%</td>
            <td>*{percentGrade}%</td>
          </tr>
        </tfoot>
       </table>
    )
  }
};

GradeTable.propTypes = {
  assignmentTypes: PropTypes.array.isRequired,
  grades: PropTypes.array.isRequired,
  passingGrade: PropTypes.number.isRequired,
  percentGrade: PropTypes.number.isRequired
}

export default GradeTable;