import React from 'react';
import $ from 'jquery';
import {localStorage} from './localStorage';

export default class Login extends React.Component{
    constructor(props, context){
        super(props);
        this.collectData = this.collectData.bind(this);
        this.sendDataToServer = this.sendDataToServer.bind(this);
        this.route = context.router;
        this.state = {
            data: [],
            url: '/api/login',
        }
    }

    collectData(){
        if($('#password').val() === $('#passwordConf').val()) {
            let userData = {
                username: $('#username').val(),
                password: $('#password').val()
            };
            console.log(this.route);
            this.sendDataToServer(userData, this.route);
        }
    }

    sendDataToServer(data, route){
        $.ajax({
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            url: this.state.url,
            success: function (data) {
                console.log('success');
                route.push('/');
            }.bind(this)
        });
    }

    render(){
        console.log(this.route);
        return(
            <form>
                <input type="text" id="username"/>
                <input type="password" id="password"/>
                <input type="password" id="passwordConf"/>
                <button id="submit" onClick={this.collectData}>Login</button>
            </form>
        )
    }
}

Login.contextTypes = {
    router: React.PropTypes.object.isRequired
};