import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react';

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      logged : false,
      email: "",
      password : ""
    };
  }

  handleLogin = (e) => {
    // TODO Login should be handled here
    console.log(this.state);
  };

  onChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  };

  toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));

  render() {
    return (
      <React.Fragment>
        <Button
          circular
          icon="right arrow"
          style={{margin: "2em"}}
          href="/"
        >
          <Icon name='arrow alternate circle left'/>
          Go Home </Button>
        <Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
          <Grid.Column style={{maxWidth: 450}}>
            <Header as='h2' color='blue' textAlign='center'>
              <Image src='img/logo.png'/> Log-in to SmartHut
            </Header>
            <Form size='large' style={{marginTop : "2em"}}>
                <Form.Input
                  control={Input}
                  type="email"
                  icon='user'
                  name="email"
                  iconPosition='left'
                  placeholder='E-mail'
                  onChange={this.onChangeHandler}
                  /*error={{
                    content: 'Please enter a valid email address',
                    pointing: 'below',
                  }}*/
                />
                <Form.Input
                  icon='lock'
                  iconPosition='left'
                  placeholder='Password'
                  name="password"
                  type='password'
                  onChange={this.onChangeHandler}
                />
              <Checkbox type="checkbox" name="rememberme" onClick={this.toggle} label='Remember me' style={{margin: "1.5em 0", float : "left"}}/>

              <Button  color='blue' fluid size='large' onClick={this.handleLogin}>
                  Login
              </Button>
            </Form>
            <Message>
              <p><a href="/forgot-password">Forgot Password?</a></p>
              <p>New to us? <a href='/signup'>  Sign Up</a></p>
            </Message>
          </Grid.Column>
        </Grid>
      </React.Fragment>
    )
  }
}