<template>
  <form @submit.stop="onSubmit">
    <div class="tp-login-input-wrapper">
      <div class="tp-login-input-box">
        <div class="tp-login-input">
          <input id="email" type="email" placeholder="vectorgeenk@mail.com" v-bind="email" />
        </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="show_pass ? 'text' : 'password'" name="password"
              placeholder="Min. 8 caracteres" v-bind="password" />
          </div>
          <div class="tp-login-input-eye" id="password-show-toggle">
            <span class="open-eye" @click="togglePasswordVisibility">
              <template v-if="show_pass">
                <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-suggetions d-sm-flex align-items-center justify-content-between mb-20">
      <div class="tp-login-remeber">
        <input id="remember" type="checkbox" name="remember" v-model="remember"/>
        <label for="remember">Recordar</label>
      </div>
      <div class="tp-login-forgot">
        <nuxt-link href="/forgot">¿Olvidaste tu contraseña?</nuxt-link>
      </div>
    </div>
    <div class="tp-login-bottom">
      <button type="submit" class="tp-login-btn w-100">
        <span v-if="!show_loader">Iniciar sesión</span>
        <SharedLoader v-if="show_loader" :width="25" :height="25" />
      </button>
    </div>
  </form>
</template>

<script setup lang="ts">
import type { LoginInterface } from "@/pinia/auth/login/interfaces/login.interface";
import { useLoginStore } from "@/pinia/auth/login/login.store";
import { useForm } from "vee-validate";
import { useRouter } from 'vue-router'
import { toast } from "vue3-toastify";
import * as yup from "yup";

const { login } = useLoginStore();

const show_pass = ref<boolean>(false);
const show_loader = ref<boolean>(false);

const router = useRouter();

const email_user = ref<string>(useCookie('email').value);
const remember = ref<boolean>(useCookie('remember').value ? true : false);

const { errors, handleSubmit, defineInputBinds, resetForm } = useForm<LoginInterface>({
  validationSchema: yup.object({
    email: yup.string().required('El correo electrónico es requerido.').email('Correo electrónico invalido.').label("Email"),
    password: yup.string().required('La contraseña es requerida.').min(8, 'La contraseña debe ser de al menos 8 caracteres').label("Password"),
  }),
  initialValues: {
    email: remember.value ? email_user.value : '',
  }
});

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

  const is_loggin = await login({...values, remember: remember.value});

  if (is_loggin.login) {
    toast.success(is_loggin.msg, { position: 'bottom-center' });
    router.push('/');
    resetForm();
  } else {
    toast.error(is_loggin.msg, { position: 'bottom-center' });
  }
  show_loader.value = false;

});

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

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