/**************************************************/
/** TRANSFER SECTION THAT IS BASED ON WHAT IS TYPED INTO THE SERACH FIELDS
/**************************************************/
class Transfer extends React.Component {
    constructor(props) {
      super()
      this.state = { loaded:false, data:[], pageData:'', deptSearch:'', schoolId:props.match.params.schoolId }
    }
    componentDidMount() {
      callDb("/api/build.php?transfer="+this.state.schoolId, this);
    }
    setDept = (val) => {
      this.filterData('dept', val)
    }
    setKeyword = (val) => {
      this.filterData('keyword', val)
    }
    filterData = (searchBy, searchVal) => {
      let fData = filterData(searchBy, searchVal, 'transfer', this.state.data);
      this.setPageElements(fData)
      // console.log(fData)
    }
    setPageElements = (fdata) => {
      let pagedata, depts;
      if(fdata.length > 0) {
        pagedata = fdata.map(function(x, key) {
           return <TransferTemplate data={ x } key={ key } />
         })
         depts = <SearchByDept data={ fdata } />
      } else {
        pagedata = <SearchError />
      }
      this.setState({ pageData:pagedata, deptSearch:depts })
    }
    render(){
      let page, deptSearch
      let uni = 'Loading...'

      if(this.state.loaded) {
        page = this.state.pageData != '' && this.state.pageData
        uni = this.state.data[0] ? this.state.data[0].remote_school : <div className="alert alert-danger" role="alert">Error! School code not found</div>
        deptSearch = this.state.deptSearch
      }

      return (
        <div className="main row">
          <div className="col-lg-3">
            <Sidebar />
          </div>
          <div className="col-lg-9">
            <h1>{ uni }</h1>
            <SearchBoxes returnDept={ this.setDept } returnKeyword={ this.setKeyword }/>
            <div className="trans">
              <div className="svsuItems">
                { deptSearch }
                { page }
              </div>
            </div>
          </div>
        </div>
      );
    }
}

class TransferTemplate extends React.Component {
  constructor(props) {
    super()
    this.state = { data:props.data }
  }
  render() {
    let rows = []
    let data = this.props.data

    data.forEach(function (y, key) {
      // GROUPS SVSU COURSES
      if(key > 0 && data[key].remote_course == data[key-1].remote_course){
        rows.push(<tr key={key}><td></td><td></td><td></td><td>{ y.svsu_course }</td><td>{ y.svsu_title }</td><td>{ y.svsu_credits }</td></tr>)
      }
      // WHEN SVSU COURSE CHANGES
      else{
        rows.push(<tr key={key}><td>{ y.remote_course }</td><td>{ y.remote_title }</td><td>{ y.remote_credits }</td><td>{ y.svsu_course }</td><td>{ y.svsu_title }</td><td>{ y.svsu_credits }</td></tr>)
      }

      // IF TRANSFER COMMENTS EXIST AND PLACES THEM IN THE ROW AFTER SVSU SECTION GROUP
      if(y.trans_comments != '' && key < data.length) {
        if(data[key+1] != undefined && data[key].remote_course != data[key+1].remote_course){
          rows.push(<tr key={key+y.trans_comments}><td colSpan="6"><b>Comments:</b> { y.trans_comments }</td></tr>)
        }
      }

      // IF COMMENTS EXIST IN THE LAST ELEMENT
      if(y.trans_comments != '' && key+1 == data.length){
        rows.push(<tr key={key+y.trans_comments}><td colSpan="6"><b>Comments:</b> { y.trans_comments }</td></tr>)
      }

      // try{
      //    if(y.trans_comments != '' && key < data.length && data[key].remote_course != data[key+1].remote_course) {
      //       rows.push(<tr key={key+y.trans_comments}><td colSpan="6"><b>Comments:</b> { y.trans_comments }</td></tr>)
      //    }
      // }
      // catch(e){
      //    if(e){
      //       // Need to take a look at why failing (Delta - R)
      //    }
      // }

    })

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