import React from 'react';
import Input from '../utils/validate/input'
import {Link, browserHistory } from 'react-router';

var App = React.createClass({
    getInitialState: function () {
        return {
            valid : {
                username : true,
                password: true
            },
            value: {
                username : '',
                password : ''
            },
            server_error : false,
            error: false,
            stack : []
        }
    },

    push_stack : function (funct) {
        var stack = this.state.stack
        stack.push(funct)
        this.setState({stack:stack})

    },
    send: function(){

        this.setState({preload : true})
        var url = frontendsettings.get('api').login;
        Promise.all(
            this.state.stack.map(function(i){
                return new Promise(i)
            })
        ).then(function(){
            $.post(url, this.state.value).done(function (res) {
                this.setState({preload : false})
                browserHistory.push('/app/')
            }.bind(this)).fail(function (res) {

                this.setState({preload : false})

                if (res.status != 401) {
                    that.setState({
                        error: {
                            server_error: true
                        }
                    })
                } else {
                    var valid = this.state.valid
                        for(i in valid){
                            valid[i] = false
                        }
                    that.setState({
                        valid:valid
                    })
                }

            }.bind(this))
        }.bind(this));

    },

    validate: function(name,status){
        var valid_obj = this.state.valid
            valid_obj[name] = status
        this.setState({valid : valid_obj})
    },
    set_value : function(name,value){
        var local_value = this.state.value
            local_value[name] = value
        this.setState({value : local_value})
    },
    render: function () {

        return <div className="enter__content">

            <Link to="/" className="enter__logo"></Link>
            <p className="t-title">Вход</p>
            <div className="enter__form">
                <Input stack={this.push_stack} set_value={this.set_value} valid_obj={this.state.valid} validate={this.validate} error_text="Проверьте адрес электронной почты" all_w name="username" check_type="text" type="text" autoFocus placeholder="Эл. почта"/>
                <Input stack={this.push_stack} set_value={this.set_value} valid_obj={this.state.valid} validate={this.validate} error_text="Почта или пароль неверны" all_w name="password"  check_type="text" type="password" autoFocus placeholder="Пароль">
                    <Link to="/enter/recover/"
                          className="input__btn t-body link link--def-case link--def-color">Забыли?</Link>
                </Input>
                <div className={this.state.error && this.state.error.server ? "error" : ""}>
                    <div onClick={this.send}
                         className={"btn btn--all-w"+(this.state.preload ? ' btn--preloader' : '' )}>ВОЙТИ
                    </div>
                    <p className="error__mes">Что-то пошло не так,<br/> попробуйте повторить чуть позже.</p>
                </div>
                <moduleblocks:config_open_registration>
                    <Link to="/enter/registration/" className="enter__link link">ЗАРЕГИСТРИРОВАТЬСЯ</Link>
                </moduleblocks:config_open_registration>
            </div>

        </div>
    }
});

module.exports = App;