import React, { Component } from 'react';
import { FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap';
import { Link } from 'react-router';
import Layout from './layout';
import Constants from '../utils/constants';
import Ajax from '../utils/ajax';

class Registration extends Component {
    constructor() {
        super();
        this.getNameValidationState = this.getNameValidationState.bind(this);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleSurnameChange = this.handleSurnameChange.bind(this);
        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handlePassChange = this.handlePassChange.bind(this);
        this.handlePassConfChange = this.handlePassConfChange.bind(this);
        this.register = this.register.bind(this);
        this.state = {  name: '',
                        surname: '',
                        username: '',
                        password: '',
                        passconf: ''
                     }
    }

    register() {
        var userData = {
            name: this.state.name,
            surname: this.state.surname,
            username: this.state.username,
            password: this.state.password,
            role: '1',
            javaClass: Constants.USER_JAVA_CLASS
        };

        Ajax.post('rest/users', userData).end();
    }

    getNameValidationState() {
        const length = this.state.name.length;
        if (length < 4) return 'error';
        return 'success';
    }
    handleNameChange(e) {
        this.setState({ name: e.target.value });
    }
    handleSurnameChange(e) {
        this.setState({ surname: e.target.value });
    }
    handleUsernameChange(e) {
        this.setState({ username: e.target.value });
    }
    handlePassChange(e) {
        this.setState({ password: e.target.value });
    }
    handlePassConfChange(e) {
        this.setState({ passconf: e.target.value });
    }
    render() {
        return (
            <Layout>
                <form className="registration">
                    <h2>Registration</h2>
                    <ControlLabel className="formLabel">Name</ControlLabel>
                    <FormGroup controlId="name" validationState={this.getNameValidationState} />
                    <FormControl
                        type="text"
                        value={this.state.name}
                        placeholder="Enter your name"
                        onChange={this.handleNameChange}
                    />
                    <FormControl.Feedback />
                    <ControlLabel className="formLabel">Surname</ControlLabel>
                    <FormGroup controlId="surname" />
                    <FormControl
                        type="surname"
                        value={this.state.surname}
                        placeholder="Enter your surname"
                        onChange={this.handleSurnameChange}
                    />
                    <FormControl.Feedback />
                    <ControlLabel className="formLabel">Username</ControlLabel>
                    <FormGroup controlId="username" />
                    <FormControl
                        type="username"
                        value={this.state.username}
                        placeholder="Enter your username"
                        onChange={this.handleUsernameChange}
                    />
                    <FormControl.Feedback />
                    <ControlLabel className="formLabel">Password</ControlLabel>
                    <FormGroup controlId="password" />
                    <FormControl
                        type="password"
                        value={this.state.password}
                        placeholder="Enter your password"
                        onChange={this.handlePassChange}
                    />
                    <ControlLabel className="formLabel">Password again</ControlLabel>
                    <FormControl.Feedback />
                    <FormGroup controlId="passconf" />
                    <FormControl
                        type="password"
                        value={this.state.passconf}
                        placeholder="Confirm your password"
                        onChange={this.handlePassConfChange}
                    />
                    <FormControl.Feedback />
                    <Link to="/home"><Button className="submitButton">Register</Button></Link>
                    <Link to="/"><Button className="submitButton">Back</Button></Link>
                </form>
            </Layout>
        );
    }
  }

export default Registration;