<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" v-validate data-vv-rules="required|email" name="email" class="form-control" id="email" placeholder="">
              <span class="invalid-email d-block" v-show="errors.has('email')">{{ errors.first('email') }}</span>
              <!-- <span class="invalid-email d-block"></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" @blur="match_check" class="input-lg form-control" name="password2" id="password2" placeholder="" autocomplete="off">
              <span class="invalid-pass"></span>
            </div>
            <input type="button" v-on:click="newUser()" class="btn btn-green" id="submit" data-loading-text="Cadastrando..." value="Cadastrar">
            <transition name="fade">
              <span class="error-message" v-show="error != null">{{ error }}</span>
            </transition>
          </form>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        input: {
          username: '',
          password: '',
          match_password: '',
        },
        error: '',
      }
    },
    methods: {
      match_check () {
        if (this.input.password === this.input.match_password) this.error = 'senhas nao conferem'
        return this.error === ''
      },
      password_check() {
        if (!this.hasNumber) this.error = 'não tem numero'
        if (!this.hasLowerCase) this.error = 'não tem letra minuscula'
        if (!this.hasUpperCase) this.error = 'não tem letra maiúscula'
        if (!this.minLength) this.error = 'não tem 6 caracteres'

        return this.error === ''
      },
      username_check() {
        if (this.username === '') this.error = 'digite um email'
        // if (this.username./regex Validando email/) this.error = 'digite um email valido'
        return this.error === ''
      },
      newUser() {
        if (!this.username_check) return
        if (!this.password_check) return
        if (!this.match_check) return
        // TODO: cadastrar e redirecionar
        console.log('fazer');
      }
    },
    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>