import React from 'react';
import axios from 'axios';
import Router from 'next/router';
import './Register.scss';

export default class Register extends React.Component {

  state = {
    username: '',
    email: '',
    number: '',
    password: '',
    error: null,
    usernameValidation: true,
    emailValidation: true,
    numberValidation: true,
    passwordValidation: true,
    inputType: 'password'
  };

  onSubmit =  e => {
    const {username, email, number, password} = this.state;

    axios.post('/register', {
        username: username,
        email: email,
        number: number,
        password: password
      })
      .then( response => {
        this.setState({
            usernameValidation: true,
            emailValidation: true,
            numberValidation: true,
            passwordValidation: true
        });
        if (response.data.validation) {
            const validation = response.data.validation;
            this.setState(validation);
        } else {
            if(response.data.contacts) {
                this.redirect('/dashboard');
            } else {
                this.redirect('/login/locations');
            }
        }
      })
      .catch( error => {
        console.log(error);
      });

    e.preventDefault();
  };

  onChange = key => e => {
    this.setState({
        [key]: e.target.value,
        usernameValidation: true,
        emailValidation: true,
        numberValidation: true,
        passwordValidation: true
    });
  };

  showHide = e => {
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      inputType: this.state.inputType === 'input' ? 'password' : 'input'
    })
  }


  redirect = url => {
    window.location = url;
  }

  nextRouter = url => {
    Router.push(url)
  }

  render() {
    const {
        username,
        number,
        email,
        password,
        error,
        usernameValidation,
        emailValidation,
        numberValidation,
        passwordValidation
    } = this.state;


    return (
      <div className="Login">
        <div className="Login__auth">
            <div className="Login__authHeader">Зарегистрируйтесь и станьте диллером Билюкс</div>
            <div className="Login__socialButtons">
                <div
                    className="Login__socialButton _fb"
                    onClick={() => this.nextRouter('/auth/facebook/callback')}
                    >
                    Facebook
                </div>
                <div
                    className="Login__socialButton _gg"
                    onClick={() => this.nextRouter('/auth/google/callback')}
                    >
                    Google +
                </div>
            </div>
            <div className="Login__or">или</div>
            <form onSubmit={this.onSubmit}
                className="Login__inputs"
            >
                <div className="Login__inputsWrapp">
                    <label>
                        Имя и фамилия
                        <input
                            className={usernameValidation ? "Login__input" : "Login__input _err"}
                            type="text" value={username}
                            onChange={this.onChange('username')}
                        />
                        {!usernameValidation && error && <div className='Login__error'>{error}</div>}
                    </label>
                </div>
                <div className="Login__inputsWrapp">
                    <label>
                        Email
                        <input
                            className={emailValidation ? "Login__input" : "Login__input _err"}
                            type="text" value={email}
                            onChange={this.onChange('email')}
                        />
                        {!emailValidation && error && <div className='Login__error'>{error}</div>}
                    </label>
                </div>
                <div className="Login__inputsWrapp">
                    <label>
                        Номер телефона
                        <input
                            className={numberValidation ? "Login__input" : "Login__input _err"}
                            type="text" value={number}
                            onChange={this.onChange('number')}
                        />
                        {!numberValidation && error && <div className='Login__error'>{error}</div>}
                    </label>
                </div>
                <div className="Login__inputsWrapp">
                    <label className="Login__passwordLabel">
                        Пароль
                        <input
                            className={passwordValidation ? "Login__input" : "Login__input _err"}
                            type={this.state.inputType} value={password}
                            onChange={this.onChange('password')}
                        />
                        <span
                            className= {this.state.inputType === 'input' ? "Login__passwordShow _hide" : "Login__passwordShow"}
                            onClick={this.showHide}>
                        </span>
                         {!passwordValidation && error && <div className='Login__error'>{error}</div>}
                    </label>
                </div>
                <button type="submit" className="Login__buttonLogin">Зарегистрироваться</button>
            </form>
        </div>
        <div className="Login__register">
            <div className="Login__registerTitle">
               Уже есть аккаунт?
            </div>
            <div
                className="Login__buttonLogin"
                onClick={() => this.nextRouter('/login')}
                >
                Войти
            </div>
        </div>
      </div>
    );
  }
}