<template>
  <h1>{{$t('pwdResetRequest.title')}}</h1>
    <form @submit.prevent="handleFormSubmit()">
      <InputEmail
        v-model="email"
        name="email"
        :label="$t('signupLabelEmail')"
        placeholder=""
        :class="emailStatus"

      >
        <template #message>
          <p v-if="emailErrors.isEmpty" class="error">{{ $t('signupErrorEmailEmpty') }}</p>
          <p v-else-if="emailErrors.isntValid" class="error">{{ $t('signupErrorEmailIsntValid') }}</p>
          <p v-else-if="emailValid" class="success">{{ $t('signupEmailIsValid') }}</p>
        </template>
      </InputEmail>
      
      <ButtonBase
        :disabled="!emailValid || awaiting"
        :loading="awaiting">
        {{ $t('pwdResetRequest.formBtn') }}
      </ButtonBase>

      <div class="error" v-if="formErrors.submitFailed">
        <p>{{ $t('pwdResetRequest.pb') }}</p>
        <p>{{ $t('pwdResetRequest.message') }} {{formErrors.message}}</p>		
      </div>
      <div class="success" v-if="success">
        <p>{{ $t('pwdResetRequest.successMessage') }}</p>
        <p>{{ $t('pwdResetRequest.linkValidity') }}</p>
        <p>{{ $t('pwdResetRequest.seeU') }}</p>
      </div>
    </form>
</template>

<script setup lang="ts">
definePageMeta({
  public: true
})
const { locale } = useI18n()
const authStore = useAuthStore()
const email = ref("")
const awaiting = ref(false)
const emailErrors = ref({
  isEmpty: false as boolean,
  isntValid: false as boolean,
})
const formErrors = ref({
  submitFailed: false as boolean,
  message: null as string | null,
})
const success = ref(false)

const emailValid = computed(() => isValidEmail(email.value))
const emailStatus = computed(() => {
  return emailValid.value ? "mail-is-valid" : "mail-is-invalid"
})

function isValidEmail(value: string):boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
}
  
const handleFormSubmit = async() => {
    //* Errors reinitialisation...
    awaiting.value = true
    emailErrors.value.isEmpty     = false;
    emailErrors.value.isntValid   = false;
    formErrors.value.submitFailed = false;
    formErrors.value.message      = '';
    success.value = false;

    //* Now come the verifications 
    emailErrors.value.isEmpty = (email.value == '')
    emailErrors.value.isntValid = ( !isValidEmail(email.value) );
    
    if (emailErrors.value.isEmpty || emailErrors.value.isntValid){
      return false;
    }
      const response = await authStore.pwdResetResquest(email.value, locale.value);
      //* If we have a message, it means we have an error...
      
      if (response == true){
        success.value = true;
        email.value = "";
        awaiting.value = false;
      }
      else {
        formErrors.value.submitFailed = true;
        formErrors.value.message = authStore.error;
        awaiting.value = false;
        success.value = false;
      }
    }
    
</script>

<style scoped lang="scss">
form {
  display: flex;
  flex-direction: column;
  padding: 1em;
  margin: 0;
}
</style>