<template>
  <form @submit.stop="onSubmit">
    <div class="tp-login-input-wrapper">
      <div class="tp-login-input-box">
        <div class="tp-login-input">
          <input id="name" type="text" placeholder="Juan Martínez" v-bind="name" maxlength="100"/>
        </div>
        <div class="tp-login-input-title">
          <label for="name">Nombre completo</label>
        </div>
        <err-message :msg="errors.name" />
      </div>
      <div class="tp-login-input-box">
        <div class="tp-login-input">
          <input id="email" type="email" placeholder="vectorgeenk@mail.com" v-bind="email" maxlength="100"/>
        </div>
        <div class="tp-login-input-title">
          <label for="email">Correo electrónico</label>
        </div>
        <err-message :msg="errors.email" />
      </div>
      <div class="tp-login-input-box">
        <div class="p-relative">
          <div class="tp-login-input">
          <input
            id="tp_password"
            :type="showPass?'text':'password'"
            name="password"
            placeholder="Min. 8 caracteres"
            v-bind="password"
            maxlength="100"
          />
        </div>
        <div class="tp-login-input-eye" id="password-show-toggle">

          <span class="open-eye" @click="togglePasswordVisibility">
            <template v-if="showPass">
              <svg-open-eye />
            </template>
            <template v-else>
              <svg-close-eye />
            </template>
          </span>
          
        </div>
        <div class="tp-login-input-title">
          <label for="tp_password">Contraseña</label>
        </div>
      </div>
      <err-message :msg="errors.password" />
      </div>
    </div>
    <div class="tp-login-bottom">
      <button type="submit" class="tp-login-btn w-100 d-flex align-items-center justify-content-center">
        <span v-if="!show_loader">
          Registrarme
        </span>
        <SharedLoader v-if="show_loader" :width="25" :height="25"/>
      </button>
    </div>
  </form>
</template>

<script setup lang="ts"> 
import type { RegisterInterface } from '@/pinia/auth/register/interfaces/register.interface';
import { useRegisterStore } from '@/pinia/auth/register/register.store';
import { storeToRefs } from 'pinia';
import { useForm } from 'vee-validate';
import { toast } from 'vue3-toastify';
import * as yup from 'yup';
const { register } = useRegisterStore();
const {user_created} = storeToRefs(useRegisterStore());


let showPass = ref<boolean>(false);
const show_loader = ref<boolean>(false);


const { errors, handleSubmit, defineInputBinds, resetForm } = useForm<RegisterInterface>({
  validationSchema: yup.object({
    name: yup.string().required('El nombre es requerido.').max(100, 'Máximo 100 caracteres').label("Name"),
    email: yup.string().required('El correo electrónico es requerido.').email('Correo electrónico invalido.').max(100, 'Máximo 100 caracteres').label("Email"),
    password: yup.string().required('La contraseña es requerida.').min(8, 'La contraseña debe ser de al menos 8 caracteres').max(100, 'Máximo 100 caracteres').label("Password"),
  }),
});

const onSubmit = handleSubmit(async values => {
  show_loader.value = true;
  const registered = await register(values);

  if(registered) {
    user_created.value = true;
    resetForm()
  } else {
    toast.error('Hubo un error al registrarse', { position: 'bottom-center' });
  }
  show_loader.value = false;
});

const togglePasswordVisibility = () => {
  showPass.value = !showPass.value;
};

const name = defineInputBinds('name');
const email = defineInputBinds('email');
const password = defineInputBinds('password');
</script>
