/**************************************************/
/** INDIVIDUAL COURSE SEARCH BASED ON COURSE NUMBER FROM URL
/**************************************************/
class LookupCourse extends React.Component {
  constructor(props) {
    super()
    this.state = { course:props.match.params.course, loaded:false, data:[] }
  }
  componentDidMount() {
    callDb("/api/build.php?course="+this.state.course, this)
    // callDb("/api/build.php?course=KINE352", this)
    // console.log('asfdas');
  }
  createUniLinks = (data) => {
    let unis = []
    data.map(function(val) {
      unis.indexOf(val.remote_school) == -1 && unis.push(val.remote_school)
    })

    return <SearchByUni data={unis} />
  }
  createUniTables = (data) => {
    let tables = []
    let fdata = filterBySingleCourse(data)

    for(let x in fdata) {
      tables.push(<CourseTables  data={fdata[x]} key={x} />)
    }

    return tables
  }

  render() {
    let tables, unis
    if(this.state.loaded){
        unis = this.createUniLinks(this.state.data)
        tables = this.createUniTables(this.state.data)
    }
    return (
      <div className="main row">
        <div className="col-lg-3">
          <Sidebar />
        </div>
        <div className="col-lg-9">
          <h1>SVSU Transfer Equivalencies</h1>
          <p><Link to='/svsu'>Back to SVSU Course Lookup</Link></p>
          { unis }
          { tables }
        </div>
      </div>
    )
  }
}

class NewCourseRow extends React.Component {
  render() {
    let y = this.props.data;
    return(
      <tr>
        <td>{ y.svsu_course }</td>
        <td>{ y.svsu_title }</td>
        <td>{ y.svsu_credits }</td>
        <td>{ y.remote_course }</td>
        <td>{ y.remote_title }</td>
        <td>{ y.remote_credits }</td>
      </tr>
    )
  }
}

class GroupedCourseRow extends React.Component {
  render() {
    let y = this.props.data;
    return(
      <tr>
        <td></td><td></td><td></td>
        <td>{ y.remote_course }</td>
        <td>{ y.remote_title }</td>
        <td>{ y.remote_credits }</td>
      </tr>
    )
  }
}

class Testing extends React.Component {
  render() {
    let y = this.props.data;
    return(
      <tr>
        <td>{ y.svsu_course }</td>
        <td>{ y.svsu_title }</td>
        <td>{ y.svsu_credits }</td>
        <td></td><td></td><td></td>
      </tr>
    )
  }
}

class CommentsRow extends React.Component {
  render() {
    let y = this.props.data;
    return(
      <tr>
        <td colSpan="6"><b>Comments:</b> { y.trans_comments }</td>
      </tr>
    )
  }
}

class CourseTables extends React.Component {
  render() {
    let rows = [];
    let comments;
    let data = this.props.data;
    let uid = this.props.data[0].remote_school.replace(/ /g, '')

    data.forEach(function(y, key) {
      if(key > 0 && data[key].svsu_course == data[key-1].svsu_course && y.svsu_credit < 3){
        rows.push(<GroupedCourseRow data={y} key={key} />)
      }
      else if(key > 0 && data[key].remote_course == data[key-1].remote_course){
        rows.push(<Testing data={y} key={key} />)
      }
      else{
        rows.push(<NewCourseRow data={y} key={key} />)
      }
     
      if(y.trans_comments != ''){
        comments = <CommentsRow data={y} key={key+y.trans_comments} />
      }
    })

    return (
      <div id={ uid }>
        <h4>{ this.props.data[0].remote_school } <BackToTop /></h4>
        <table className="table table-sm">
          <thead className="thead-light">
            <tr><th scope="col" colSpan="3">SVSU</th><th scope="col" colSpan="3">Transfer</th></tr>
            <tr>
              <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>
            { rows }
            { comments }
          </tbody>
        </table>
      </div>
    )
  }
}