<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>Üye Ol</h1>
      </div>
      <div class="section-content">
        <form id="uye-ol" @submit.prevent="handRegister">
          <form-select
            label="Kullanıcı Tipi"
            :listData="globalDataStore.customerTips"
            listText="baslik"
            listVal="id"
            v-model="uyeBilgileriStore.formData.basvuruTipId"
            required
            :invalidText="uyeBilgileriStore.invalidTexts.basvuruTipId"
            @change="uyeBilgileriStore.ChangeKullaniciTipi" />

          <form-input
            type="email"
            modelKey="email"
            v-model="uyeBilgileriStore.formData.email"
            required
            label="E-posta adresi"
            placeholder="eposta@alanadi.com"
            :invalidText="uyeBilgileriStore.invalidTexts.email" />

          <form-input
            type="tel"
            modelKey="telefonNumarasi"
            v-model="uyeBilgileriStore.formData.telefonNumarasi"
            required
            label="Telefon Numarası"
            placeholder="5554443322"
            @keydown="validationStore.allowNumbersWithKeys"
            maxlength="10"
            minlength="10"
            :invalidText="uyeBilgileriStore.invalidTexts.telefonNumarasi" />
          <template v-if="uyeBilgileriStore.formData.basvuruTipId === 18">
            <form-input
              modelKey="gercekAdi"
              v-model="uyeBilgileriStore.formData.gercekAdi"
              required
              label="Ad"
              minlength="2"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekAdi"
              @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />

            <form-input
              modelKey="gercekSoyadi"
              v-model="uyeBilgileriStore.formData.gercekSoyadi"
              required
              label="Soyadı"
              minlength="2"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekSoyadi"
              @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />

            <form-input
              modelKey="gercekTCKN"
              v-model="uyeBilgileriStore.formData.gercekTCKN"
              required
              label="TCKN"
              @keydown="validationStore.allowNumbersWithKeys"
              maxlength="11"
              minlength="11"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekTCKN" />

            <form-input
              modelKey="gercekVergiDairesi"
              v-model="uyeBilgileriStore.formData.gercekVergiDairesi"
              required
              label="Vergi Dairesi"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekVergiDairesi" />

            <form-input
              modelKey="gercekVergiNo"
              v-model="uyeBilgileriStore.formData.gercekVergiNo"
              required
              label="Vergi No"
              maxlength="10"
              minlength="10"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekVergiNo"
              @keydown="validationStore.allowNumbersWithKeys" />

            <form-input
              modelKey="gercekOdaKayitNo"
              v-model="uyeBilgileriStore.formData.gercekOdaKayitNo"
              required
              label="Oda Kayıt No/ Ticaret Sicil No"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekOdaKayitNo"
              @keydown="validationStore.allowNumbersWithKeys" />

            <form-input
              modelKey="gercekTicariUnvan"
              v-model="uyeBilgileriStore.formData.gercekTicariUnvan"
              label="Ticari Ünvan"
              :invalidText="uyeBilgileriStore.invalidTexts.gercekTicariUnvan" />
          </template>

          <template v-if="uyeBilgileriStore.formData.basvuruTipId === 21">
            <form-input
              modelKey="tuzelUnvan"
              v-model="uyeBilgileriStore.formData.tuzelUnvan"
              required
              label="Ünvan"
              :invalidText="uyeBilgileriStore.invalidTexts.tuzelUnvan" />
            <form-input
              modelKey="tuzelVergiDairesi"
              v-model="uyeBilgileriStore.formData.tuzelVergiDairesi"
              required
              label="Vergi Dairesi"
              :invalidText="uyeBilgileriStore.invalidTexts.tuzelVergiDairesi" />

            <form-input
              modelKey="tuzelVergiNo"
              v-model="uyeBilgileriStore.formData.tuzelVergiNo"
              required
              label="Vergi No"
              maxlength="11"
              minlength="10"
              :invalidText="uyeBilgileriStore.invalidTexts.tuzelVergiNo"
              @keydown="validationStore.allowNumbersWithKeys" />

            <form-input
              modelKey="tuzelSicilNo"
              v-model="uyeBilgileriStore.formData.tuzelSicilNo"
              required
              label="Ticaret Sicil No"
              :invalidText="uyeBilgileriStore.invalidTexts.tuzelSicilNo"
              @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)" />
          </template>
          <template v-if="uyeBilgileriStore.formData.basvuruTipId === 22">
            <form-input
              modelKey="dernekUnvan"
              v-model="uyeBilgileriStore.formData.dernekUnvan"
              required
              label="Ünvan"
              :invalidText="uyeBilgileriStore.invalidTexts.dernekUnvan" />
            <form-input
              modelKey="dernekVergiDairesi"
              v-model="uyeBilgileriStore.formData.dernekVergiDairesi"
              required
              label="Vergi Dairesi"
              :invalidText="uyeBilgileriStore.invalidTexts.dernekVergiDairesi" />

            <form-input
              modelKey="dernekVergiNo"
              v-model="uyeBilgileriStore.formData.dernekVergiNo"
              required
              label="Vergi No"
              maxlength="11"
              minlength="10"
              :invalidText="uyeBilgileriStore.invalidTexts.dernekVergiNo"
              @keydown="validationStore.allowNumbersWithKeys" />

            <form-input
              modelKey="dernekSicilNo"
              v-model="uyeBilgileriStore.formData.dernekSicilNo"
              required
              label="Sicil No"
              :invalidText="uyeBilgileriStore.invalidTexts.dernekSicilNo"
              @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)" />
          </template>
          <template v-if="uyeBilgileriStore.formData.basvuruTipId === 23">
            <form-input
              modelKey="sirketUnvan"
              v-model="uyeBilgileriStore.formData.sirketUnvan"
              required
              label="Ticari Ünvan"
              :invalidText="uyeBilgileriStore.invalidTexts.sirketUnvan" />
            <form-input
              modelKey="sirketVergiDairesi"
              v-model="uyeBilgileriStore.formData.sirketVergiDairesi"
              required
              label="Vergi Dairesi"
              :invalidText="uyeBilgileriStore.invalidTexts.sirketVergiDairesi" />

            <form-input
              modelKey="sirketVergiNo"
              v-model="uyeBilgileriStore.formData.sirketVergiNo"
              required
              label="Vergi No"
              maxlength="11"
              minlength="10"
              :invalidText="uyeBilgileriStore.invalidTexts.sirketVergiNo"
              @keydown="validationStore.allowNumbersWithKeys" />

            <form-input
              modelKey="sirketSicilNo"
              v-model="uyeBilgileriStore.formData.sirketSicilNo"
              required
              label="Ticari Sicil No"
              :invalidText="uyeBilgileriStore.invalidTexts.sirketSicilNo"
              @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)" />

            <form-input
              modelKey="sirketMersis"
              v-model="uyeBilgileriStore.formData.sirketMersis"
              label="Mersis No"
              :invalidText="uyeBilgileriStore.invalidTexts.sirketMersis"
              @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)" />
          </template>
          <template v-if="uyeBilgileriStore.formData.basvuruTipId === 26">
            <form-input
              modelKey="kamuUnvan"
              v-model="uyeBilgileriStore.formData.kamuUnvan"
              required
              label="Ünvan"
              :invalidText="uyeBilgileriStore.invalidTexts.kamuUnvan" />
            <form-input
              modelKey="kamuVergiDairesi"
              v-model="uyeBilgileriStore.formData.kamuVergiDairesi"
              required
              label="Vergi Dairesi"
              :invalidText="uyeBilgileriStore.invalidTexts.kamuVergiDairesi" />

            <form-input
              modelKey="kamuVergiNo"
              v-model="uyeBilgileriStore.formData.kamuVergiNo"
              required
              label="Vergi No"
              maxlength="11"
              minlength="10"
              :invalidText="uyeBilgileriStore.invalidTexts.kamuVergiNo"
              @keydown="validationStore.allowNumbersWithKeys" />

            <form-input
              modelKey="kamuSicilNo"
              v-model="uyeBilgileriStore.formData.kamuSicilNo"
              label="Ticaret Sicil No"
              :invalidText="uyeBilgileriStore.invalidTexts.kamuSicilNo"
              @keydown="validationStore.allowNumbersWithKeysExtra($event, /^[-]*$/)" />
          </template>
          <form-select
            label="İl"
            :listData="globalDataStore.ilList"
            listText="ad"
            listVal="id"
            v-model="uyeBilgileriStore.formData.ilId"
            required
            :invalidText="uyeBilgileriStore.invalidTexts.ilId"
            @change="ChangeIl" />
          <form-select
            label="İlçe"
            :listData="uyeBilgileriStore.ilceList"
            listText="ad"
            listVal="id"
            v-model="uyeBilgileriStore.formData.ilceId"
            required
            :invalidText="uyeBilgileriStore.invalidTexts.ilceId"
            @change="ChangeIlce"
            :disabled="ilceDisabled" />
          <form-select
            label="Mahalle"
            :listData="uyeBilgileriStore.mahalleList"
            listText="ad"
            listVal="id"
            v-model="uyeBilgileriStore.formData.mahalleId"
            required
            :invalidText="uyeBilgileriStore.invalidTexts.mahalleId"
            :disabled="mahalleDisabled" />
          <form-input
            modelKey="postaKodu"
            v-model="uyeBilgileriStore.formData.postaKodu"
            label="Posta Kodu"
            :invalidText="uyeBilgileriStore.invalidTexts.postaKodu"
            maxlength="5"
            minlength="5"
            @keydown="validationStore.allowNumbersWithKeys" />
          <form-textarea
            modelKey="adres"
            v-model="uyeBilgileriStore.formData.adres"
            required
            label="Adres"
            minlength="4"
            :invalidText="uyeBilgileriStore.invalidTexts.adres" />
          <form-input
            type="password"
            modelKey="password"
            v-model="uyeBilgileriStore.formData.password"
            required
            minlength="6"
            label="Parola"
            :invalidText="uyeBilgileriStore.invalidTexts.password" />

          <form-input
            type="password"
            modelKey="confirmPassword"
            v-model="uyeBilgileriStore.formData.confirmPassword"
            required
            minlength="6"
            label="Parola Tekrar"
            @keyup="PasswordCheck"
            :invalidText="uyeBilgileriStore.invalidTexts.confirmPassword" />

          <form-checkbox
            :listData="kvkkCheck"
            listText="label"
            listVal="val"
            v-model="uyeBilgileriStore.formData.kvkk"
            :invalidText="uyeBilgileriStore.invalidTexts.kvkk">
            <template #checktext0>
              <span>
                <a
                  href="/data/kvkk-sartlari.pdf"
                  target="_blank"
                  rel="noopener noreferrer">
                  KVKK Şartlarını
                </a>
                Kabul Ediyorum
              </span>
            </template>
          </form-checkbox>

          <form-checkbox
            :listData="uyelikCheck"
            listText="label"
            listVal="val"
            v-model="uyeBilgileriStore.formData.uyelikSozlesmesi"
            :invalidText="uyeBilgileriStore.invalidTexts.uyelikSozlesmesi">
            <template #checktext0>
              <span>
                <a
                  href="/data/cekilisevi-gov-tr-uyelik-sozlesmesi.pdf"
                  target="_blank"
                  rel="noopener noreferrer">
                  Üyelik Sözleşmesi Şartlarını
                </a>
                Kabul Ediyorum
              </span>
            </template>
          </form-checkbox>

          <button class="button-c button-second button-login" type="submit">
            Kayıt Ol
          </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 GuestLayout from '@/layouts/GuestLayout.vue'
  import { ref, onBeforeMount, computed } from 'vue'

  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { useAuthValidationStore } from '../stores/authValidationStore'
  const authValidationStore = useAuthValidationStore()
  import router from '@/router'

  import { useUyeBilgileriStore } from '@/module/uyeler/stores/UyeBilgileriStore'
  const uyeBilgileriStore = useUyeBilgileriStore()
  uyeBilgileriStore.ResetStore()

  const kvkkCheck = ref([
    {
      label: '',
      val: 'kvkk'
    }
  ])
  const uyelikCheck = ref([
    {
      label: '',
      val: 'uyelik'
    }
  ])

  const ilceDisabled = computed<boolean>(() => {
    return uyeBilgileriStore.ilceList.length === 0
  })
  const mahalleDisabled = computed<boolean>(() => {
    return uyeBilgileriStore.mahalleList.length === 0
  })

  const ChangeIl = async (e: Event, v: string | number, d: Record<string, any>) => {
    uyeBilgileriStore.formData.ilceId = ''
    uyeBilgileriStore.formData.mahalleId = ''
    uyeBilgileriStore.mahalleList = []
    if (Object.keys(d).length === 0) {
      uyeBilgileriStore.ilceList = []
      return
    }
    uyeBilgileriStore.ilceList = await dataStore.GetIlcelerByIlId(v)
  }
  const ChangeIlce = async (e: Event, v: string | number, d: Record<string, any>) => {
    uyeBilgileriStore.formData.mahalleId = ''
    if (Object.keys(d).length === 0) {
      uyeBilgileriStore.mahalleList = []
      return
    }
    uyeBilgileriStore.mahalleList = await dataStore.GetMahallelerByIlceId(v)
  }
  const PasswordCheck = (e: KeyboardEvent) => {
    if (
      uyeBilgileriStore.formData.confirmPassword !== uyeBilgileriStore.formData.password
    )
      uyeBilgileriStore.invalidTexts.confirmPassword =
        'Girdiğiniz değer Parola alanı ile aynı olmalıdır'
    else delete uyeBilgileriStore.invalidTexts.confirmPassword
  }

  const handRegister = async () => {
    if (uyeBilgileriStore.FormCheck()) {
      const register: any = await dataStore.dataPost('Auth/register', {
        data: uyeBilgileriStore.formData
      })

      if (register !== 'errorfalse') {
        authValidationStore.registerMessage = register.message
        authValidationStore.loginMessageType = 'success'
        authValidationStore.loginMessage =
          'Başarıyla kayıt oldunuz. Kullanıcı adı ve şifreniz ile giriş yapabilirsiniz.'
        authValidationStore.isLoginMessage = true

        router.push('/login')
      }
    } else {
      uyeBilgileriStore.isFormValid = true
    }
  }

  onBeforeMount(async () => {
    await dataStore.GetCustomerTipList()
    await dataStore.GetIlList()
  })
</script>
