<template>
  <div class="container-fluid">
    <BModal 
      id="modal-center" 
      v-model="active" 
      centered 
      title="latienda.coop" 
      ok-variant="success"> Email enviado, revisa tu bandeja de entrada. </BModal>

    <div class="row">
      <FormHeader title="Restablecer Contraseña" class="col-12" />
    </div>

    <p class="help" align="center">
      Introduce la dirección de correo asociada a tu cuenta y te enviaremos un
      email con tu nueva contraseña.
      <br />
      Recuerda que siempre puedes cambiarla dentro del menú de edición.
    </p>

    <form class="form" align="center" @submit.prevent="sendEmail">
       <FormInput
        v-model="email"
        required
        type="email"
        label-text="Email"
        @input="email = $event"
      />

      <p v-if="error" class="error">
        {{ error }}
      </p>

      <SubmitButton :text="sending ? `Enviando...` : `Enviar`" image-url="" :disabled="sending" />
    </form>
  </div>
</template>

<script>
export default {
  setup() {
    definePageMeta({
      layout: 'main',
    })
  },
  data() {
    return {
      email: '',
      error: '',
      sending: false,
      active: false,
    }
  },
  methods: {
    async sendEmail() {
      this.sending = true
      this.error = null
      const config = useRuntimeConfig()
      try {
        await $fetch('/forgotten_password/', {
          baseURL: config.public.baseURL,
          method: 'POST',
          body: { email: this.email },
        })
        this.active = true
      } catch (err) {
        this.error = 'Error al enviar el email. Por favor, inténtalo de nuevo.'
        console.error('Error al enviar el email:', err)
      } 
      this.sending = false
    },
  },
}
</script>

<style lang="scss" scoped>
.container-fluid {
  margin-top: 5rem;
  margin-bottom: 5rem;

  @include mobile {
    margin-top: 7rem;
  }
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.help {
  color: $color-navy;
}
.error {
  color: $color-error;
}
</style>
