var commonConfig = require('../../config/common');
var $ = require("jquery");
import React from 'react';
import {connect} from 'react-redux';
import {setUser} from '../actions/userActions';
import {setPopUp, setProgressOverlay} from '../actions/commonActions';
import UserService from '../services/UserService';

class User extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: ""
        };
        this.onChangeEmail = this.onChangeEmail.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);
        this.onSignIn = this.onSignIn.bind(this);
        this.onSignOut = this.onSignOut.bind(this);
    }

    onChangeEmail(name) {
        this.setState({
            email: name.target.value
        });
    }


    onChangePassword(password) {
        this.setState({
            password: password.target.value
        });

    }

    onSignIn(e) {
        e.preventDefault();

        if (this.state.email.trim().length <= 0) {
            $("input[name='email']").addClass('req');
            this.props.setPopUp({
                type: 'error',
                title: 'Error',
                text: 'Empty `Email`'
            });
            return false;
        } else {
            $('input[name="email"]').removeClass('req');
        }

        if (this.state.password.trim().length <= 0) {
            $("input[name='password']").addClass('req');
            this.props.setPopUp({
                type: 'error',
                title: 'Error',
                text: 'Empty `Password`'
            });
            return false;
        } else {
            $('input[name="password"]').removeClass('req');
        }

        var token = '';

        this.props.setProgressOverlay(true);
        UserService.signIn(this.state).then((signInResult)=> {
            token = signInResult.accessToken;
            return UserService.signInByToken(token);
        }).then((signInByTokenResult)=> {
            localStorage.setItem(commonConfig.Common.tokenName, token);
            this.props.setProgressOverlay(false);
            this.props.setPopUp({
                type: 'ok',
                title: 'Success',
                text: 'Welcome, ' + signInByTokenResult.nickName + '!'
            });
            this.props.setUser(signInByTokenResult);
        }).catch((error)=> {
            this.props.setProgressOverlay(false);
            this.props.setPopUp({
                type: 'error',
                title: 'Sign-in error',
                text: error.message
            });
        });
    }

    onSignOut() {
        UserService.signOut();
        window.location = '/user';
    }

    render() {
        if (this.props.user.currentUser) {
            return (
                <div className="container">
                    <div className="container__top-panel inline-blocks-wrapper">
                        <div className="container__top-panel-title">User profile</div>
                        <div className="container__top-panel-btn-wrapper">
                            <a className="btn" onClick={this.onSignOut}>Sign out</a>
                        </div>
                    </div>
                    <div className="container__form">
                        <p>Welcome back, {this.props.user.currentUser.nickName}</p>
                    </div>
                </div>
            );
        } else {
            return (
                <div className="container">
                    <div className="container__top-panel inline-blocks-wrapper">
                        <div className="container__top-panel-title">Authorization</div>
                    </div>
                    <div className="container__form">
                        <form className="form-main form-main--user" onSubmit={this.onSignIn}>
                            <div className="container__form-field">
                                <label className="container__form-label">Email</label>
                                <input className="container__form-input" value={this.state.email}
                                       name="email" onChange={(e)=>{this.onChangeEmail(e)}}/>
                            </div>
                            <div className="container__form-field">
                                <label className="container__form-label">Password</label>
                                <input type="password" className="container__form-input" value={this.state.password}
                                       name="password" onChange={(e)=>{this.onChangePassword(e)}}/>
                            </div>
                            <div className="container__form-field">
                                <input type="submit" className="btn" onSubmit={this.onSignIn} value="Sign in"/>
                            </div>
                        </form>
                    </div>
                </div>);
        }
    }
}

function mapStoreProps(store) {
    return ({
        common: store.common,
        user: store.user
    });
}

const mapDispatchToProps = (dispatch) => ({
    setPopUp: (...args) => dispatch(setPopUp(...args)),
    setUser: (...args) => dispatch(setUser(...args)),
    setProgressOverlay: (...args) => dispatch(setProgressOverlay(...args))
});

export default connect((store) => mapStoreProps, mapDispatchToProps)(User);