<template>
  <GuestLayout>
    <section class="section-login">
      <div class="login-header">
        <div class="logo-header">
          <img
            src="@/assets/images/cekilisevi-logo-n.png"
            alt="MPI Çekiliş Evi"/>
        </div>
        <h1>Şifremi Unuttum</h1>
      </div>
      <div class="section-content">
        <form id="sifremi-unuttum" @submit.prevent="SubmitForgetPassword">
          <form-input
            type="email"
            modelKey="email"
            v-model="forgetForm.email"
            required
            label="E-posta adresi"
            placeholder="eposta@alanadi.com"
            :invalidText="invalidTexts.email" />
          <button class="button-c button-second button-login" type="submit">
            Bilgileri Gönder
          </button>
        </form>
        <div class="login-nav login-nav-back">
          <RouterLink to="/login">&lt; Geri</RouterLink>
        </div>
      </div>
    </section>
  </GuestLayout>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import GuestLayout from '@/layouts/GuestLayout.vue'
  import { useDataStore } from '@/stores/dataStore'
  import { useValidationStore } from '@/stores/validationStore'

  const dataStore = useDataStore()
  const validationStore = useValidationStore()

  const invalidTexts = reactive<Record<string, any>>({})

  const forgetForm = reactive<Record<string, any>>({
    email: ''
  })

  const FormCheck = (): boolean => {
    let check = true

    if (validationStore.checkEmpty(forgetForm.email)) {
      invalidTexts.email = 'Eposta alanı boş bırakılamaz.'
      check = false
    } else {
      delete invalidTexts.email
      if (!validationStore.checkEmail(forgetForm.email)) {
        invalidTexts.email =
          'Lütfen eposta adresinizi doğru formatta giriniz. Örn: isim@alanadi.td'
        check = false
      } else {
        delete invalidTexts.email
      }
    }

    return check
  }

  const SubmitForgetPassword = async () => {
    if (FormCheck()) {
      const forget = await dataStore.dataPost('Auth/forgetmypassword', {
        params: { email: forgetForm.email }
      })
    }
  }
</script>
