import React, { Component } from 'react';
import './App.css';
import GreenHouse from './Components/GreenHouse.js';
import uuidv1 from 'uuid/v1';
import 'bootstrap/dist/css/bootstrap.min.css';

//this will contain the content of the application, will be the main handler
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isAuth:false, username:'', password:''};
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignOut = this.handleSignOut.bind(this);
  }
  handleChange(e) {
    this.setState({[e.target.name]:e.target.value});
  }

  handleClick(e){
    //logic to login the user
    this.setState({isAuth:true})
  }

  handleSignOut() {
    this.setState({isAuth:false, username:'', password:'', showLogin:true})
  }

  render() {
    return(
      <div>
        <Navbar username = {this.state.username} isAuth = {this.state.isAuth} handleChange={this.handleChange} handleSignOut ={this.handleSignOut}/>
        {!this.state.isAuth && this.state.showLogin && <Login handleClick = {this.handleClick} handleChange={this.handleChange} />}
        {this.state.username && this.state.isAuth && <p>{this.state.username}</p>}
        {this.state.password && this.state.isAuth && <p>{this.state.password}</p>}
      </div>
    );

  }
}

class Login extends Component {

  render() {
    return(
      <div>
        <form>
          <input type='text' name='username' onChange = {this.props.handleChange} />
          <input type='password' name='password' onChange = {this.props.handleChange} />
          <button type='button'  onClick = {this.props.handleClick} >
          click me to change parent state
        </button>
        </form>
      </div>
    );
  }
}

class Navbar extends Component{
  render() {
    return(
      <div>
        <p>Greenhouse Controller</p>
        {this.props.username && this.props.isAuth && <p>{this.props.username}</p>}
        {!this.props.isAuth && <button onClick={this.props.handleChange} name='showLogin' value={false}>Sign in</button>}
        {!this.props.isAuth && <button >Sign up</button>}
        {this.props.isAuth && <button onClick={this.props.handleSignOut}>Sign out</button>}
      </div>
    );
  }
}



export default App;