import React from 'react';
import API from '../../lib/API';
import {Link} from 'react-router-dom';

class AnswerKeyList extends React.Component {
  constructor(props) {
    super(props);

    this.api = new API();
    this.state = {
      courses: new Array(0),
    };

    this.api.answerKeys.list().then(r => this.setState({courses: r.courses}));
  }

  getCreatedAt(unixEpoch) {
    if (!unixEpoch) {
      return '';
    }

    const date = new Date();
    date.setTime(unixEpoch);

    return date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear();
  }

  render() {
    const courseRows = this.state.courses.map((course, index) => (
      <tr>
        <td>{course.name}</td>
        <td>{this.getCreatedAt(course.created_at)}</td>
        <td>
          <Link to="/answerkeys/edit/{course.name}">edit</Link>
        </td>
      </tr>
    ));

    return (
      <div className="answerkeylist row">
        <h2>Answer Keys</h2>
        <table className="u-full-width">
          <thead>
            <tr>
              <th>Course name</th>
              <th>Created</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tbody>{courseRows}</tbody>
        </table>
      </div>
    );
  }
}

export default AnswerKeyList;