var React = require("react");
var NavigationActions = require('../../actions/navigationActions');
var UserActions = require('../../actions/userActions');
var Router = require('react-router');
var Link = Router.Link;
var RibicaValidationMixin = require('../../components/shared/mixins/ribicaValidationMixin');
var ValidationUtils = require('../../utils/validation.js');
var LoginModel = require('../../models/login');
var UserStore = require('../../stores/userStore');

var Login = React.createClass({
    mixins: [RibicaValidationMixin],
    componentDidMount:function() {
        UserStore.addChangeListener(this.onUserStoreChange);
        UserActions.clearLogin();
    },
    componentWillUnmount: function() {
        UserStore.removeChangeListener(this.onUserStoreChange);
    },
    componentWillReceiveProps: function() {
        UserActions.clearLogin();
    },
    onUserStoreChange: function() {
        if(this.isMounted()) {
            var loginState = UserStore.getLoginState();
            this.setState({login: loginState});
            if (loginState.loggedIn) {
                setTimeout(function(){
                    NavigationActions.goToHome();
                }, 0);
            }
        }
    },
    getInitialState: function() {
        return {
            email: '',
            password: '',
            login: UserStore.getLoginState()
        };
    },
    validations: {
        email:function(value) {

            if(!ValidationUtils.isValidEmail(value)) {
                return ['Neispravna email adresa.'];
            }
            return [];
        },
    password: function(value) {
        if(!ValidationUtils.isValidRequired(value)) {
            return ["Šifra je obavezna."];
        }
        return [];
    }
    },
    renderErrorMessage: function(message){
        return (<div className='error-message'>{message}</div>)
    },
    doLogin: function(e) {
        
        if(this.validate()) {
            var loginInfo = new LoginModel({
                email: this.state.email,
                password: this.state.password
            });

            UserActions.userLogin(loginInfo);
         
        }

        e.preventDefault();
    },
    renderLoginFailure: function() {

        var loginState = this.state.login;
        if(!loginState.loggedIn) {
            return (<div>{loginState.error}</div>)
        }

        return (<div></div>)
    },
    render : function() {
        return (<div>
                <div className="col-md-6">

                <span className="h3">Prijava </span>
                {this.renderLoginFailure()}
                <div className="center" >
                <form className="form-horizontal">

                <div className="form-group">
                <label for="email">Email adresa</label>
                <input type="email" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>

                {this.getValidationMessages('email').map(this.renderErrorMessage)}
                </div>
                <div className="form-group">
                <label for="password">Šifra</label>
                <input type="password" onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"></input>

                {this.getValidationMessages('password').map(this.renderErrorMessage)}
                </div>
                <button type="button" onClick={this.doLogin} className="btn btn-default">Prijava</button>
                </form>
                </div>


                </div>
                <div className="col-md-6">
                <Link to="registracija">

                Niste registrovani? Kliknite ovdje da se registrujete!
                </Link>


                </div>
                </div>);
    }
});

module.exports = Login;