import React, {Component} from 'react';
import { translate } from 'react-translate';
import {Link} from 'react-router-dom';
import { connect } from 'react-redux';
import {
  signOutAction, loginWithEmailAndPasswordAction,
  loginWithSocialAuthProviderAction, getRedirectResultAction
} from '../../actions/userActions';

import './style.css';
import EmailValidator from '../../utility/EmailValidator';

import Button from '../button';
import FormInput from '../FromInput';

class Login extends Component{

    constructor(props){
        super(props);
        this.state = this.getInitialState();
        this.handleChange = this.handleChange.bind(this);
        this.handleCheck = this.handleCheck.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.shouldMarkError = this.shouldMarkError.bind(this);
        this.handleSocialLogin = this.handleSocialLogin.bind(this);
    }

    registerRedirect = () => {
        this.setState((state,props)=>{
            return {isRedirectRegistered: true}
        });
    }

    getInitialState = () => {
        return {
            isRedirectRegistered: false,
            user: {
                email: '',
                password: '',
                rememberMe: ''
            },
            touched:{
                email: false,
                password: false
            }
        }
    }

    componentDidMount() {
        if (!this.state.isRedirectRegistered) {
          this.props.getRedirectResult();
          this.registerRedirect();
        }
    }

    handleChange(e) {
        let user = this.state.user;
        user[e.target.name] = e.target.value;
        this.setState({ user: user });
    }

    handleCheck(e){
        let user = this.state.user;
        user[e.target.name] = e.target.checked;
        this.setState({ user: user });
    }

    handleSocialLogin(e, providerName) {
        this.props.loginWithSocialAuthProvider(providerName);
    }

    handleBlur(e) {
        let touched = this.state.touched;
        touched[e.target.name] = true;
        this.setState({ touched: touched });
    }

    handleSubmit(e) {
        e.preventDefault();
        if (!this.canBeSubmitted()) {
            return;
        }
        //some actions
        this.props.loginWithEmailAndPassword(this.state.user.email,this.state.user.password)
    }

    canBeSubmitted() {
        let validations = this.validate(this.state.user);
        //can be submitted or not, so opposite of if validations are true.
        return !Object.keys(validations).some(x => validations[x]);
    }

    validate = (user) => {
        return {
          email: !this.isEmailValid() || user.email === undefined || user.email.length === 0,
          password: user.password === undefined || user.password.length === 0 || user.password.length < 6
        };
    }

    isEmailValid() {
        if (this.state.user.email)
          return EmailValidator.validate(this.state.user.email);
        return true;
    }

    shouldMarkError(field){
        const errors = this.validate(this.state.user);
        const hasError = errors[field];
        const shouldShow = this.state.touched[field];
        return (hasError && shouldShow) ? 'error' : '';
    }

    render(){
        const {t} = this.props;

        // BUTTONS DATA

        const googleBtn = {
            icon: 'icon-google',
            btnData:{
                btnText: t('btn-google-plus'),
                btnClass: 'google-plus-button',
                btnAction: (e) => this.handleSocialLogin(e, 'google')
            }
        }

        const facebookBtn = {
            icon: 'icon-facebook',
            btnData:{
                btnText: t('btn-facebook'),
                btnClass: 'facebook-button',
                btnAction: (e) => this.handleSocialLogin(e, 'facebook')
            }
        }

        const signUpBtn = {
            btnData:{
                btnText: t('btn-log-in'),
                btnClass: 'action-button',
                btnAction: this.handleSubmit
            },
        }

        // INPUTS DATA

        const emailInput = {
            icon:'icon-mail',
            input:{
                type: 'text',
                placeholder: t('input-email'),
                name:'email',
                class: this.shouldMarkError('email'),
                action:{
                    onChange:this.handleChange,
                    onBlur:this.handleBlur
                }
            }
        }

        const passwordInput = {
            icon:'icon-padlock',
            input:{
                type: 'Password',
                placeholder: t('input-password'),
                name:'password',
                class: this.shouldMarkError('password'),
                action:{
                    onChange:this.handleChange,
                    onBlur:this.handleBlur
                }
            }
        }

        return(
            <div className=" form-container log-in">
                <h1 className="title">{t('title')}</h1>

                <Button
                        btn={googleBtn.btnData}
                        icon={googleBtn.icon}/>

                <Button
                        btn={facebookBtn.btnData}
                        icon={facebookBtn.icon}/>

                <p className="text">{t('log-email')}</p>
                <form>
                    <FormInput
                        icon={emailInput.icon}
                        input={emailInput.input}/>

                    <FormInput
                        icon={passwordInput.icon}
                        input={passwordInput.input}/>


                    <div className="form-group">
                        <div className="custom-control custom-checkbox">
                            <input type="checkbox"
                                    className="custom-control-input"
                                    id="remember-check"
                                    onChange={this.handleCheck}
                                    />
                            <label className="custom-control-label" htmlFor="remember-check">
                                {t('check-remember')}
                            </label>
                        </div>
                    </div>
                    <Button
                        btn={signUpBtn.btnData}/>
                </form>

                <Link className="link-text" to="/">
                    {t('forgot-your-password')}
                </Link>

                <div className="sign-up-text-container">
                    <p className="text" >
                        {t('dont-account')}
                        <Link className="link-text" to="/">
                            {t('sing-up')}
                        </Link>
                    </p>
                </div>
            </div>
        );
    }

}

const mapStateToProps = (state) => ({
  user: state.user.user,
  isLoading: state.user.isLoading
});

const mapDispatchToProps = (dispatch) => ({
  logout: () => dispatch(signOutAction()),
  loginWithEmailAndPassword: (email, password) => dispatch(loginWithEmailAndPasswordAction(email, password)),
  loginWithSocialAuthProvider: (providerName) => dispatch(loginWithSocialAuthProviderAction(providerName)),
  getRedirectResult: () => dispatch(getRedirectResultAction())
});

export default connect(mapStateToProps,mapDispatchToProps)(translate("Login")(Login));