import * as React from '../lib/reactjs/react';
import {Spinner} from './spinner';

export var LoginForm = React.createClass({
    getDefaultProps: function() {
        return {
            authApiUrl: 'api/user/login'
        };
    },

    getInitialState: function() {
        return {
            username: '',
            password: '',
            isLoading: false
        };
    },

    setIsLoading: function(isLoading) {
        this.setState({ isLoading: isLoading });
    },

    handleChange: function(e) {
        switch (e.target.id) {
            case 'loginForm_username':
                this.setState({ username: e.target.value })
                break;
            case 'loginForm_password':
                this.setState({ password: e.target.value });
                break;
        }
    },

    authApi: function(success, error) {
        $.ajax({
            method: 'POST',
            url: this.props.authApiUrl,
            data: {
                username: this.state.username,
                password: this.state.password
            },
            success: success,
            error: error
        });
    },

    handleSubmit: function(e) {
        e.preventDefault();

        var errors = (this.state.username == '') ? "Zadejte uživatelské jméno!\n" : '';
        errors += (this.state.password == '') ? "Zadejte heslo!\n" : '';

        if (errors != '') {
            alert(errors);
        }
        else {
            this.setIsLoading(true);
            this.authApi(
                function(res) {
                    window.location = '/';
                }.bind(this),
                function(xhr, status, err) {
                    console.log(status);
                    console.log(err);
                    this.setIsLoading(false);
                }.bind(this)
            );
        }
    },

    render: function() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="form-group form-group-lg">
                    <input
                        type="text"
                        id="loginForm_username"
                        className="form-control"
                        onChange={this.handleChange}
                    />
                </div>
                <div className="form-group form-group-lg">
                    <input
                        type="password"
                        id="loginForm_password"
                        className="form-control"
                        onChange={this.handleChange}
                    />
                </div>
                <div className="form-group">
                    <input
                        type="submit"
                        id="loginForm_submit"
                        className="btn btn-primary btn-lg btn-block"
                        value={(this.state.isLoading) ? <Spinner /> : 'Přihlásit'}
                    />
                </div>
            </form>
        );
    }
});