import React, { Component,Fragment } from 'react'
import { Redirect } from 'react-router-dom'
import * as Forms from '../Forms'
import '../pages.css'
import icon from './icon.png'
import axios from 'axios'
import borrow from './borrow-book.png'

class Student extends Component {
 constructor(props) {
   super(props)
 
   this.state = {
    user_id:'',
    user_name:'',
     s_form: '',
     logout: false,
     currbook:'no book borrowed' 
   }
   this.clickHandler=this.clickHandler.bind(this);
  
 }
 componentWillMount(){
     this.setState({user_id:this.props.match.params.uid,user_name:this.props.match.params.uname})
   
     axios.get('http://localhost:5000/borrower/'+this.props.match.params.uid)
     .then(responsee => {
         if(responsee.data===null){
             console.log('undefined')
         }
         else
        {this.setState({currbook:responsee.data.book_id})}
     })
 }

 clickHandler(){
    return(
        <div style={{position:"absolute",top:"30%",left:"3.5%"}}>
            <p style={{fontFamily:"sans-serif",color:"#0ff517",fontSize:"20px",marginLeft:"100px"}}><b>SELECT FORM</b></p>
            
            <div style={{marginLeft:"20px"}}><button className="fbutton" style={{backgroundColor:"red"}} onClick={(e) => {this.setState({s_form: 'borrow'})}}>Borrow book</button></div>   
            <div style={{marginLeft:"20px"}}><button className="fbutton" onClick={(e) => {this.setState({s_form: 'bsearch'})}}>Search book</button></div>         
        </div>
    )
 }

  renderform(s_form){
   
    if(!s_form)
    {
        return(<h2 align="center">Form renders here!</h2>)
    }
    else if(s_form==='borrow')
    {
        const Fm = Forms[s_form];
    return <Fm uid={this.state.user_id} uname={this.state.user_name}/>
    }
    const Fm = Forms[s_form];
    return <Fm />
   
    
 }
 book(){
    if(this.state.s_form!='borrow'){
        return <h3>Current book borrowed:   {this.state.currbook}</h3>
    }
    else return <img src={borrow} style={{width:"200px",height:"200px"}}></img>
 }


  render() {
      if(this.state.logout)
      return <Redirect to='/slogin'/>
      else
    return (
     <Fragment>
        <div style={{width:"fill",height:"53px",backgroundColor:" #333"}}>
        <img src={icon} width="53px" height="53px"/>
        <div style={{position:"absolute",left:"55px",top:"0px",color:"#f2f2f2",fontSize:"30px"}}><b>BMS</b></div>
        <div class="topnav">
            <a onClick={(e) =>{this.setState({logout:true})}} style={{position:"absolute",right:"3px",top:"0px",color:'white'}}><b>Logout</b></a>
        </div>
        </div>
         <div>
         <div>
         <h1 style={{color:"#fff",fontFamily:"serif",marginLeft:"1%"}}><b>Hello {this.state.user_name}</b></h1>
            <h1 style={{color:"red",fontFamily:"serif",marginLeft:"40%",position:"absolute",top:"10%"}}><b>FUNCTIONALITIES</b></h1>
         </div>
         
        
         <section>
             {this.clickHandler()}
             <div style={{position:"absolute",right:"5%",top:"30%",width:"600px",backgroundColor:"#fed000",color:"#242424",borderRadius:"30px",fontFamily:"serif"}}>
                 {}
                 {this.renderform(this.state.s_form)}
             </div>
         </section>
         <div style={{color:'white',position:'absolute',marginLeft:'2.5%',top:'65%'}}>
            {this.book()}
         </div>
         </div>
     </Fragment>
    )
  }
}

export default Student;