import React, { Component } from 'react'
import './forms.css'
import axios from 'axios';

export default class USearch extends Component{
    constructor(props){
        super(props)
        this.state={
            searchby:'name',
            inp: '',
            objects:[],
            test:0
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleinp = this.handleinp.bind(this);
        this.rendertable=this.rendertable.bind(this);
        this.search=this.search.bind(this);
        this.view=this.view.bind(this);
    }
    handleChange (event) {
        this.setState({ searchby: event.target.name});
      }
      handleinp(event){
        this.setState({inp : event.target.value});
      }
      view(){
          this.setState({searchby:'name'})
      }
      rendertable(){
            if(this.state.test===0){
                return <h3  style={{marginLeft:'2%'}}>Results will appear here</h3>
            }
            else if(this.state.objects===null){
              return <h3>No Results!</h3>
          } 
            else {
            return <div style={{marginLeft:'2%'}}>
            <button onClick={this.view}>View Results</button>
            <table>
            <thead>
                <tr>
              <th>User_id</th>
              <th>user_name</th>
              <th>Email</th>
              <th>Password</th>
              </tr>
            </thead>
            <tbody>
              {this.state.objects.map(id => (
                <Row id = {id}/>
              ))}
            </tbody>
          </table>
          </div>
       }
      }
      search(){
            let object = [];
            axios.get('http://localhost:5000/user')
            .then(response=> {response.data.map((obj,idx) => {
                 if(obj[this.state.searchby].includes(this.state.inp)){
                    object.push(obj)
                }          
            })}) 
           this.setState({objects:object,test:1});
            console.log(object); 
        }
           
      
    render(){
        return(
            <div style={{position:"absolute",right:"5%",top:"6%",backgroundColor:"white",width:"600px"}}>
            <h3 style={{marginLeft:'2%'}}><b>Search Users &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></h3>
            <h4 style={{marginLeft:'2%'}}>(directly click search to view all details)</h4>
            <div class="dropdown" style={{marginLeft:"2%"}}>
            <button class="dropbtn">by name</button>
            <div class="dropdown-content">
             <a href="#"  name="name" onClick={this.handleChange}>by_name</a>
             <a href="#" name="email" onClick={this.handleChange}>by_Email</a>
             <a href="#"  name="_id" onClick={this.handleChange}>By_id</a>
            </div>
           </div>
          
             <input type="text" placeholder="Search" onChange={this.handleinp} style={{marginLeft:"2%"}}/>
  
             <button onClick={this.search} className="b1">Search</button>
             {this.rendertable()}
           </div>
        )
    }
}
const Row = ({ id }) => (
    <tr style={{backgroundColor:"#181818",color:"white"}}>
      <td>
       {id._id}
      </td>
      <td>
       {id.name}
      </td>
      <td>
       {id.email}
      </td>
      <td>
       {id.password}
      </td>
    </tr>
  );