import React, { Component, useState } from 'react'
import Navbar from '../Layout/Navbar'

import SuccessRegisterMessage from '../FlashMessages/SuccessRegister'
import FailedRegisterMessage from '../FlashMessages/SignUpFailed'

export default class SignUp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: '',
        password: '',
        email: ''
      },
      errors: []
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  handleChange = e => {
    const {
        name,
        value
    } = e.currentTarget;
    this.setState({
      form: {
        ...this.state.form,
        [name]: value
    }
    })
    console.log({
        form: {
            ...this.state.form,
            [name]: value
        }
    })
};


isValidForm(formDatas) {
  let errorsForm = [...this.state.errors]

  if (formDatas.username.length < 5) {
      this.setState({
          errors: [...this.state.errors, {
              field: "username",
              message: "Username trop court"
          }]
      })
  }
  if (!formDatas.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      this.setState({
          errors: [...this.state.errors, {
              field: "email",
              message: "Email invalide"
          }]
      })
  }
  if (formDatas.password.length < 7) {
      this.setState({
          errors: [...this.state.errors, {
              field: "password",
              message: "Password trop court"
          }]
      })
  }
  console.log(this.state.errors)
  return this.state.errors;
}


handleSubmit(e) {
  e.preventDefault();

  this.isValidForm(this.state.form)
}


  render() {
    return(
      <div>
      <Navbar />
      <div className="flex flex-row justify-center mt-32 form-signup-dig">
        <div className="w-full max-w-xs">
          <form onSubmit={this.handleSubmit} method="POST">
            <label className="block text-grey-darker text-sm font-bold mb-2">
              Nom d'utilisateur
              <input
                type="text"
                value={this.state.form.username}
                onChange={this.handleChange}
                className="shadow appearance-none border rounded w-full h-12 py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                name="username"
                placeholder="Ex: Nikos"
                required
              />
            </label>
            <label className="block text-grey-darker text-sm font-bold mb-2">
              Email
              <input
                type="text"
                value={this.state.form.email}
                onChange={this.handleChange}
                className="shadow appearance-none border rounded w-full h-12 py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                name="email"
                placeholder="azerty@hotmail.fr"
                required
              />
            </label>
            <div className="mb-6">
              <label className="block text-grey-darker text-sm font-bold mb-2" htmlFor="password">
                Mot de passe
              </label>
              <input
                type="password"
                value={this.state.form.password}
                onChange={this.handleChange}
                className="shadow appearance-none border border rounded w-full h-12 py-2 px-3 text-grey-darker mb-3 leading-tight focus:outline-none focus:shadow-outline"
                id="password"
                name="password"
                placeholder="******************"
                required
                />
            </div>
            <div className="flex items-center justify-between">
              <button
                className="bg-blue-600 hover:bg-blue-dark text-white font-bold w-full h-12 py-2 px-4  rounded focus:outline-none focus:shadow-outline"
                type="submit"
              >
                Se connecter
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    )
  }

}