/**************************************************/
/** SVSU SECTION THAT IS BASED ON WHAT IS TYPED INTO THE SERACH FIELDS
/**************************************************/
class Svsu extends React.Component {
    constructor(props) {
      super()
      this.state = { loaded:false, data:[], pageDate:'', deptSearch: '' }
    }
    componentDidMount() {
      callDb("/api/build.php?name=svsu", this);
    }
    setDept = (val) => {
      this.filterData('dept', val)
    }
    setKeyword = (val) => {
      this.filterData('keyword', val)
    }
    filterData = (searchBy, searchVal) => {
      let fData = filterData(searchBy, searchVal, 'svsu', this.state.data);
      this.setPageElements(fData)
    }
    setPageElements = (fdata) => {
      let pagedata, depts;
      if(fdata.length > 0) {
        pagedata = fdata.map(function(x, key) {
           return <SvsuTemplate data={ x } key={ key } />
         })
         depts = <SearchByDept data={ fdata } />
      } else {
        pagedata = <SearchError />
      }
      this.setState({ pageData:pagedata, deptSearch:depts })
    }
    render() {
        let page, deptSearch;
        // let test = this.state.loaded ? 'App Loaded' : 'Loading....';
        if(this.state.loaded && this.state.pageData != '' && this.state.deptSearch != ''){
          page  = this.state.pageData
          deptSearch = this.state.deptSearch
        }
        return (
          <div className="main row">
            <div className="col-lg-3">
              <Sidebar />
            </div>
            <div className="col-lg-9">
              <h1>SVSU Transfer Equivalencies</h1>
              <SearchBoxes returnDept={ this.setDept } returnKeyword={ this.setKeyword }/>
              <div className="svsu">
                <div className="svsuItems">
                  { deptSearch }
                  { page }
                </div>
              </div>
            </div>
          </div>
        );
    }
}

class SvsuTemplate extends React.Component {
  constructor(props) {
    super()
    this.state = { data:props.data }
  }
  render() {
    let x = this.props.data.map(function (y, key) {
      return (
        <tr key={ key }>
          <td><Link to={ '/svsu/'+y.svsu_course }>{ y.svsu_course }</Link></td>
          <td>{ y.svsu_course_name }</td>
        </tr>
      )
    })

    return (
      <div className="svsu-table" id={ this.props.data[0].svsu_dept }>
        <h3>{ this.props.data[0].svsu_dept } <BackToTop/></h3>
        <table className="table table-sm">
          <thead className="thead-light">
            <tr><th scope="col">SVSU Course</th><th scope="col">SVSU Title</th></tr>
          </thead>
          <tbody>{ x }</tbody></table>
      </div>
    )
  }
}