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



export default class Signup extends Component{
  constructor(props) {
    super(props);
    this.state = {
      logged : false,
      completeName: '',
      username: '',
      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});
  };


  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'/> Sign-up to SmartHut
            </Header>
            <Form size='large' style={{marginTop : "2em"}}>
              <Form.Input
                icon='address card outline'
                iconPosition='left'
                placeholder='First Name and Last Name'
                name="completeName"
                type='text'
                onChange={this.onChangeHandler}
                required
              />  
              <Form.Input
                icon='user'
                iconPosition='left'
                placeholder='Username'
                name="username"
                type='text'
                onChange={this.onChangeHandler}
                required
            />
              <Form.Input
                  control={Input}
                  type="name"
                  icon='envelope outline'
                  name="email"
                  iconPosition='left'
                  placeholder='E-mail'
                  onChange={this.onChangeHandler}
                  /*error={{
                    content: 'Please enter a valid email address',
                    pointing: 'below',
                  }}*/
                  required
                />
              <Form.Input
              icon='lock'
              iconPosition='left'
              placeholder='Password (at least 8 characters)'
              name="password"
              type='password'
              onChange={this.onChangeHandler}
              minLength={6}
              required
            />
              <Button  color='blue' fluid size='large' onClick={this.handleLogin}>
                  Register
              </Button>
            </Form>
          </Grid.Column>
        </Grid>
      </React.Fragment>
    )
  }
}