/**************************************************/
/** INDIVIDUAL GEN-ED CATEGORY BY ID
/**************************************************/
class Category extends React.Component {
  constructor(props) {
    super()
    this.state = { loaded: false, data: [], categoryId: props.match.params.categoryId }
  }
  componentDidMount() {
    callDb("/api/build.php?category=" + this.state.categoryId, this);
  }
  render() {
    let title, courses, loading = 'Loading...';
    if (this.state.loaded) {
      loading = '';
      let courseData = this.state.data;
      switch (courseData[0].category) {
        case 'BS':
          title = 'Basic Skills';
          break;
        case 'GE1':
          title = 'GE Category 1 - Literature';
          break;
        case 'GE2':
          title = 'GE Category 2 - Arts';
          break;
        case 'GE3':
          title = 'GE Category 3 - Numerical Understanding';
          break;
        case 'GE4':
          title = 'GE Category 4 - Natural Sciences';
          break;
        case 'GE5':
          title = 'GE Category 5 - History/Philosophy';
          break;
        case 'GE6':
          title = 'GE Category 6 - Social Sciences';
          break;
        case 'GE7':
          title = 'GE Category 7 - Social Institutions';
          break;
        case 'GE8':
          title = 'GE Category 8 - International Systems';
          break;
        case 'GE9':
          title = 'GE Category 9 - Oral Communications';
          break;
        case 'GE10':
          title = 'GE Category 10 - Written Communications';
          break;
        default:
          title = 'GE Category';
      }
      console.log(courseData);
      courses = courseData.map(function (y, key) {
        return <tr>
          <td>{y.name}</td>
          <td>{y.remote_dept}</td>
          <td>{y.remote_course}</td>
          <td>{y.remote_credits}</td>
          <td>{y.svsu_dept}</td>
          <td>{y.svsu_course}</td>
          <td>{y.svsu_credits}</td>
        </tr>
      })

    }
    return (
      <div className="main row">
        <div className="col-lg-3">
          <Sidebar />
        </div>
        <div className="col-lg-9">
          <div className="row">
            <div className="col">
              <h1>Transfer Courses by Basic Skills/General Education Category</h1>
            </div>
          </div>
          <div className="row text-left">
            <div className="col">
              <ul className="list-item-bullet">
                <li>PLACEHOLDER TEXT (TBD)</li>
              </ul>
            </div>
          </div>
          <div className="row mb-3">
            <div className="col pr-0">
              <strong>Select a basic skills/general education category below to view the transfer courses that meet these requirements.</strong>
            </div>
          </div>
          <div className="row">
            <div className="col">
              <h2>{title}</h2>
            </div>
          </div>
          <div className="links row">
            <div className="col-12">{loading}</div>
            <div className="col-12">
              <table className="table table-sm">
                <thead className="thead-light">
                  <tr><th scope="col" colSpan="4">Transfer</th><th scope="col" colSpan="3">SVSU</th></tr>
                  <tr>
                    <th scope="col">School</th>
                    <th scope="col">Course</th>
                    <th scope="col">Title</th>
                    <th scope="col">Credits</th>
                    <th scope="col">Course</th>
                    <th scope="col">Title</th>
                    <th scope="col">Credits</th>
                  </tr>
                </thead>
                <tbody>
                  {courses}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    )
  }
}