<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>Giriş Yap</h1>
      </div>
      <div class="section-content">
        <form action="#" id="login-form" @submit.prevent="Login">
          <form-input
            type="email"
            modelKey="username"
            v-model="authStore.loginData.username"
            required
            label="Kullanıcı Adı (e-posta adresi)"
            placeholder="eposta@alanadi.com"
            :invalidText="authValidationStore.invalidTexts.username" />

          <form-input
            type="password"
            label="Şifre"
           
            v-model="authStore.loginData.password"
            required />

          <div
            :class="['form-inner-comment', authValidationStore.loginMessageType]"
            v-if="authValidationStore.isLoginMessage">
            <span>{{ authValidationStore.loginMessage }}</span>
          </div>
          <button class="button-c button-second button-login" type="submit">
            Giriş Yap
          </button>
        </form>
        <div class="login-nav">
          <RouterLink to="/forgot-password">Şifremi Unuttum</RouterLink>
          <RouterLink to="/register">Kaydol</RouterLink>
        </div>
      </div>
    </section>
  </GuestLayout>
</template>
<script setup lang="ts">
  import { onBeforeMount, reactive, ref } from 'vue'

  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useAuthStore } from '../stores/authStore'
  const authStore = useAuthStore()
  import { useAuthValidationStore } from '../stores/authValidationStore'
  const authValidationStore = useAuthValidationStore()
  import router from '@/router'

  import GuestLayout from '@/layouts/GuestLayout.vue'

  const Login = async () => {
    if (authValidationStore.FormCheck()) {
      let login = await dataStore.dataPost('Auth/login', {
        data: authStore.loginData
      })
      Object.assign(authStore.loginData, authStore.safeLoginData)
      if (login !== 'errorfalse') {
        await usersStore.SetUserSessionData(login)
        await usersStore.SetUserData()

        if (usersStore.isPanelUser) {
          router.push('/')
        } else {
          if (usersStore.userStatus === 0 || usersStore.userStatus === null) {
            router.push('/profil')
          } else {
            router.push('/')
          }
        }
      } else {
        authValidationStore.loginMessageType = 'alert'
        authValidationStore.loginMessage =
          'Kullanıcı adı veya şifrenizi yanlış girdiniz. Lütfen kontrol edip tekrar deneyiniz.'
        authValidationStore.isLoginMessage = true
      }
    } else {
      authValidationStore.isFormValid = true
    }
  }

  onBeforeMount(() => {  
    if(usersStore.userIsAuth) router.push('/')
  })
</script>
