<template lang="html">
  <section class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col wrapper-box">
        <img class="mx-auto d-block" src="../assets/logo_polvo_colorido.svg" alt="Grupo Polvo" title="Grupo Polvo">
        <p class="wrapper-box__title text-center">Seja bem vindo</p>
        <div>
          <form class="form form-newaccount" id="passwordForm">
            <div class="form-group">
              <label for="">E-mail</label>
              <input type="text" v-model="input.username" @focus="clearError('username')" @blur="username_check" name="email" class="form-control" id="email" placeholder="">
              <span class="invalid-email d-block" v-show="error.username">{{ error.username }}</span>
            </div>
            <div class="form-group">
              <label for="">Senha</label>
              <input type="password" v-model="input.password" class="input-lg form-control" :class="{'green' : passValid === 3, 'yellow' : passValid === 2, 'orange' : passValid === 1}" name="password1" id="password1" placeholder="" autocomplete="off">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-newaccount__bullet-steps d-flex flex-row">
                    <div class="bullet-pass-hor" :class="{'active' : passValid > 0}"><span :class="{'green' : passValid === 3, 'yellow' : passValid === 2, 'orange' : passValid === 1}"></span></div>
                    <div class="bullet-pass-hor" :class="{'active' : passValid > 1}"><span :class="{'green' : passValid === 3, 'yellow' : passValid === 2, 'orange' : passValid === 1}"></span></div>
                    <div class="bullet-pass-hor" :class="{'active' : passValid > 2}"><span :class="{'green' : passValid === 3, 'yellow' : passValid === 2, 'orange' : passValid === 1}"></span></div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <span class="d-block bullet-pass-rounded" v-if="!minLength"><span class="fa fa-circle" aria-hidden="true"></span> Pelo menos 6 caracteres</span>
                  <span class="d-block bullet-pass-rounded" v-if="minLength"><span class="fa fa-circle active" aria-hidden="true"></span> Pelo menos 6 caracteres</span>

                  <span class="d-block bullet-pass-rounded" v-if="!hasUpperCase"><span class="fa fa-circle" aria-hidden="true"></span> Pelo menos 1 letra maiúscula</span>
                  <span class="d-block bullet-pass-rounded" v-if="hasUpperCase"><span class="fa fa-circle active" aria-hidden="true"></span> Pelo menos 1 letra maiúscula</span>

                  <span class="d-block bullet-pass-rounded" v-if="!hasNumber"><span class="fa fa-circle" aria-hidden="true"></span> Pelo menos 1 número</span>
                  <span class="d-block bullet-pass-rounded" v-if="hasNumber"><span class="fa fa-circle active" aria-hidden="true"></span> Pelo menos 1 número</span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="">Confirme sua senha</label>
              <input type="password" v-model="input.match_password" @focus="clearError('passwordMatch')" @blur="match_check" @keyup.enter="newUser" class="input-lg form-control" name="password2" id="password2" placeholder="" autocomplete="off">
              <span class="invalid-pass d-block" v-show="error.passwordMatch">{{ error.passwordMatch }}</span>
            </div>
            <input type="button" @click="newUser" class="btn btn-green" id="submit" data-loading-text="Cadastrando..." value="Cadastrar">
            <transition-group name="fade">
              <span class="error-message" :key="index + 'error'"v-for="(errorName, index) in error" v-show="errorName !== ''">{{ errorName }}</span>
            </transition-group>
          </form>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        input: {
          username: '',
          password: '',
          match_password: '',
        },
        error: {
          password: '',
          passwordMatch: '',
          username: ''
        }
      }
    },
    methods: {
      match_check () {
        this.error.passwordMatch = ''
        if (this.input.password !== this.input.match_password) this.error.passwordMatch = 'senhas nao conferem'
        return this.error.passwordMatch !== ''
      },
      login() {
        if (this.input.username != '' && this.input.password != '' && this.input.match_password != '') {
          if (this.input.username && this.input.password && this.input.match_password) {
            this.$emit('authenticated', true);
            this.$router.replace({ name: "secure" });
          } else {
            this.error = 'E-mail ou senha incorretos'
            console.log("The username and / or password is incorrect");
          }
        } else {
          this.error = 'Digite um e-mail válido e uma senha'
          console.log("A username and password must be present");
        }
      },
      clearError (field) {
        this.error[field] = ''
      },
      password_check() {
        this.error.password = ''
        if (!this.hasNumber) this.error.password = 'não tem numero'
        if (!this.hasLowerCase) this.error.password = 'não tem letra minuscula'
        if (!this.hasUpperCase) this.error.password = 'não tem letra maiúscula'
        if (!this.minLength) this.error.password = 'não tem 6 caracteres'

        return this.error.password !== ''
      },
      username_check() {
        this.error.username = ''
        if (this.input.username === '') this.error.username = 'digite um email'
        // if (this.username./regex Validando email/) this.error = 'digite um email valido'
        return this.error.username !== ''
      },
      newUser() {
        if (this.username_check()) return
        if (this.password_check()) return
        if (this.match_check()) return
        // TODO: cadastrar e redirecionar
      },
    },
    computed: {
      hasNumber() {
        return /\d/.test(this.input.password)
      },
      hasLowerCase() {
        return /[a-z]/.test(this.input.password)
      },
      hasUpperCase() {
        return /[A-Z]/.test(this.input.password)
      },
      minLength() {
        return this.input.password.length > 5
      },
      passValid() {
        let value = 0
        if (this.hasNumber) value += 1
        // if (this.hasLowerCase) value += 1
        if (this.hasUpperCase) value += 1
        if (this.minLength) value += 1
        return value
      },
    },
  }
</script>

<style lang="scss">
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 300ms;
  }
</style>