import React from 'react'
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'
import ManageProduct from './ManageProduct.jsx';
import Products from './Products.jsx';
import ProductType from './ProductType.jsx';
import ManageProductType from './ManageProductType.jsx';

const url =  'http://13.251.156.195:8080/products'
export default class Student extends React.Component {

   constructor(props) {
       super(props)
       this.state = {
           students: [],
           id: '',
           name: '',
           addNew: true,
           showGrid: true
       }


   }

   fetchData() {

       fetch(url)
           .then(res => res.json())
           .then(json => this.setState({ students: json }))
   }

   componentDidMount() {
       this.fetchData()
   }

   handleChange(e) {
       var obj = {}
       obj[e.target.name] = e.target.value
       this.setState(obj)
   }

   save() {
       if(this.state.addNew === true){
           fetch(url, {
               method: 'post',
               headers: {
                   'Content-Type': 'application/json',
                   'Accept': 'application/json'
               },
               body: JSON.stringify({ id: this.state.id, name: this.state.name })
           }).then(res => res.json())
               .then(json => this.fetchData())
       }
       else{
           fetch(url, {
               method: 'put',
               headers: {
                   'Content-Type': 'application/json',
                   'Accept': 'application/json'
               },
               body: JSON.stringify({ id: this.state.id, name: this.state.name })
           }).then(res => res.json())
               .then(json => this.fetchData())
       }

   }

   delete(id){
       if(confirm('Do you want to delete?')){
           fetch(url + "/"+id, {
               method: 'delete',
           }).then(res=>res.json())
           .then(json=>this.fetchData())
       }

   }

   add(id, name){
       this.setState({id: '', name: '', addNew: true})
   }

   edit(id, name){
       this.setState({id: id, name: name, addNew: false})
   }

   render() {
       return (

           <div>
               <BrowserRouter>
                    <ul>

                      <h2> <Link to='/'>Home</Link></h2>
                        <h3> Products</h3>
                        <li><Link to='/Products'>Display Products list </Link></li>


                        <li><Link to='/ManageProduct'> Manage Products</Link></li>

                        <h3> Products Types</h3>
                        <li><Link to='ProductPage'>dontuseyet</Link></li>
                        <li><Link to='ProductType'>Display Product Type List</Link></li>
                        <li><Link to='ManageProductType'>Manage Product Type </Link></li>
                    </ul>


                    <Route path='/Products' render={()=>
                    <div>
                    <h1>Products List</h1>
                    <Products/>
                    </div>
                    }/>

                    <Route path='/ManageProduct' render={()=>
                    <div>
                    <h1>Manage Products</h1>
                    <ManageProduct/>
                    </div>
                    }/>

                    <Route path='/ProductType' render={()=>
                    <div>
                    <h1>Product Types List</h1>
                    <ProductType/>
                    </div>
                    }/>

                <Route path='/ManageProductType' render={()=>
                    <div>
                    <h1>Product Types List</h1>
                    <ManageProductType/>
                    </div>
                    }/>








                </BrowserRouter>




           </div>
       )
   }

}