<template>
  <template
    v-if="
      (piyangoStore.lotteryDrawState || today >= ilanTarihi) &&
      loaded &&
      piyangoStore.lotteryApprove === 4 &&
      piyangoStore.lotteryData.cekilisYontemiId === 1 &&
      !usersStore.isPanelUser
    ">
    <div class="panel-header">
      <h3>İkramiye Seçimi</h3>
      <button
        v-if="
          (piyangoKatilimciStore.piyangoKatilimciUserFormData.asilTalihli ||
            piyangoKatilimciStore.piyangoKatilimciUserFormData.asilTalihli) &&
          piyangoKatilimciStore.piyangoKatilimciUserFormData.ikramiyeId !== null
        "
        class="button-c button-alert"
        @click="piyangoKatilimciStore.ResetTalihli">
        Talihli İptal Et
      </button>
    </div>
    <div class="form-item">
      <form-radio
        @change="TalihliChanged('asil')"
        group="talihli"
        label="Asil Talihli"
        half
        :val="true"
        v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.asilTalihli"
        :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.asilTalihli" />
      <form-radio
        @change="TalihliChanged('yedek')"
        group="talihli"
        label="Yedek Talihli"
        half
        :val="true"
        v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.yedekTalihli"
        :invalidText="
          piyangoKatilimciValidationStore.userFormInvalidTexts.yedekTalihli
        " />
    </div>

    <form-select
      @change="FormChanged"
      modelKey="ikramiyeId"
      clearable
      label="Kazandığı İkramiye"
      :listData="piyangoIkramiyeStore.piyangoAllIkramiyeData"
      listText="amacAdi"
      listVal="id"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.ikramiyeId"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.ikramiyeId">
      <template #activator="data">
        {{
          data.activatorData !== undefined &&
          Object.keys(data.activatorData).length > 0 &&
          piyangoKatilimciStore.piyangoKatilimciUserFormData.ikramiyeId !== null
            ? data.activatorData.cinsi +
              ', ' +
              data.activatorData.marka +
              ', ' +
              data.activatorData.model
            : 'Lütfen Seçim Yapınız'
        }}
      </template>
      <template #option="data">
        {{
          data.optionData.cinsi +
          ', ' +
          data.optionData.marka +
          ', ' +
          data.optionData.model
        }}
      </template>
    </form-select>
  </template>
  <template
    v-if="
      usersStore.isPanelUser ||
      (!usersStore.isPanelUser && !piyangoKatilimciStore.isNewKatilimci)
    ">
    <form-display
      v-if="piyangoKatilimciStore.piyangoKatilimciUserFormData.asilTalihli"
      modelText="Asil Talihli" />

    <form-display
      v-if="piyangoKatilimciStore.piyangoKatilimciUserFormData.yedekTalihli"
      modelText="Yedek Talihli" />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.adi"
      label="Adı"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.adi" />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.soyadi"
      label="Soyadı"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.soyadi" />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.eposta"
      label="E-posta adresi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.eposta" />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.sifreCode"
      label="Katılım Kodu"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.sifreCode" />
    <form-display
      half
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.dogumTarihi"
      label="Doğum Tarihi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.dogumTarihi" />
    <form-display
      half
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.telefonNo"
      label="Telefon Numarası"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.telefonNo" />
    <form-display
      half
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.il"
      label="İl"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.il" />
    <form-display
      half
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce"
      label="İlçe"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.ilce" />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.evIkametgahAdresi"
      label="İkametgah Adresi"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.evIkametgahAdresi
      " />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.magazaAdiYeri"
      label="Mağaza Adı/Yeri"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.magazaAdiYeri" />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.cekilisKatilimSiraNo"
      label="Katılım Sıra No"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.cekilisKatilimSiraNo
      "
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.cekilisHakkiAdedi"
      label="Çekiliş Hakkı Adedi"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.cekilisHakkiAdedi
      "
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.magazaKartNumarasi"
      label="Mağaza Kart No"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.magazaKartNumarasi
      "
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.katilimTarihi"
      label="Katılım Tarihi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.katilimTarihi"
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.fisFaturaTarihi"
      label="Fiş/Fatura Tarihi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.fisFaturaTarihi"
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.fisFaturaNo"
      label="Fiş/Fatura No"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.fisFaturaNo"
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.kampanyaliUrunTutari"
      label="Kampanyalı Ürün Tutarı"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.kampanyaliUrunTutari
      "
      half />
    <form-display
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.toplamTutar"
      label="Toplam Tutar"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.toplamTutar"
      half />
  </template>
  <template v-else>
    <form-input
      @keyup="FormChanged"
      modelKey="adi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.adi"
      required
      label="Ad"
      minlength="2"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.adi"
      @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />
    <form-input
      @keyup="FormChanged"
      modelKey="soyadi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.soyadi"
      required
      label="Soyadı"
      minlength="2"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.soyadi"
      @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />
    <form-input
      @keyup="FormChanged"
      type="email"
      modelKey="eposta"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.eposta"
      required
      label="E-posta adresi"
      placeholder="eposta@alanadi.com"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.eposta" />
    <form-input
      @keyup="FormChanged"
      modelKey="sifreCode"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.sifreCode"
      required
      label="Katılım Kodu"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.sifreCode" />
    <form-date
      type="date"
      modelKey="dogumTarihi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.dogumTarihi"
      label="Doğum Tarihi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.dogumTarihi"
      @change="FormChanged"
      half />
    <form-input
      @keyup="FormChanged"
      type="tel"
      modelKey="telefonNo"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.telefonNo"
      label="Telefon Numarası"
      placeholder="5554443322"
      @keydown="validationStore.allowNumbersWithKeys"
      maxlength="10"
      minlength="10"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.telefonNo"
      half />
    <form-select
      clearable
      label="İl"
      half
      :listData="globalDataStore.ilList"
      listText="ad"
      listVal="ad"
      modelKey="il"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.il"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.il"
      @change="ChangeIl"
      @clear="FormChanged" />
    <form-select
      clearable
      half
      label="İlçe"
      :listData="ilceList"
      listText="ad"
      listVal="ad"
      modelKey="ilce"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.ilce"
      :disabled="ilceDisabled"
      @change="FormChanged"
      @clear="FormChanged" />
    <form-textarea
      @keyup="FormChanged"
      modelKey="evIkametgahAdresi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.evIkametgahAdresi"
      label="İkametgah Adres"
      minlength="2"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.evIkametgahAdresi
      "
      @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />
    <form-input
      @keyup="FormChanged"
      modelKey="magazaAdiYeri"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.magazaAdiYeri"
      label="Mağaza Adı/Yeri"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.magazaAdiYeri" />
    <form-input
      @keyup="FormChanged"
      modelKey="cekilisKatilimSiraNo"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.cekilisKatilimSiraNo"
      half
      label="Katılım Sıra No"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.cekilisKatilimSiraNo
      " />
    <form-input
      @keyup="FormChanged"
      modelKey="cekilisHakkiAdedi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.cekilisHakkiAdedi"
      half
      label="Çekiliş Hakkı Adedi"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.cekilisHakkiAdedi
      "
      @keydown="validationStore.allowNumbersWithKeys" />
    <form-input
      @keyup="FormChanged"
      modelKey="magazaKartNumarasi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.magazaKartNumarasi"
      half
      label="Mağaza Kart No"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.magazaKartNumarasi
      " />
    <form-date
      type="date"
      modelKey="katilimTarihi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.katilimTarihi"
      label="Katılım Tarihi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.katilimTarihi"
      @change="FormChanged"
      half />
    <form-date
      type="date"
      modelKey="fisFaturaTarihi"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.fisFaturaTarihi"
      label="Fiş/Fatura Tarihi"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.fisFaturaTarihi"
      @change="FormChanged"
      half />

    <form-input
      @keyup="FormChanged"
      modelKey="fisFaturaNo"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.fisFaturaNo"
      half
      label="Fiş/Fatura No"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.fisFaturaNo" />
    <form-input
      @keyup="FormChanged"
      modelKey="kampanyaliUrunTutari"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.kampanyaliUrunTutari"
      half
      label="Kampanyalı Ürün Tutarı"
      :invalidText="
        piyangoKatilimciValidationStore.userFormInvalidTexts.kampanyaliUrunTutari
      "
      @keydown="validationStore.allowPrice" />
    <form-input
      @keyup="FormChanged"
      modelKey="toplamTutar"
      v-model="piyangoKatilimciStore.piyangoKatilimciUserFormData.toplamTutar"
      half
      label="Toplam Tutar"
      :invalidText="piyangoKatilimciValidationStore.userFormInvalidTexts.toplamTutar"
      @keydown="validationStore.allowPrice" />
  </template>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount, computed } from 'vue'

  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useGlobalDataStore } from '@/stores/globalDataStore'
  const globalDataStore = useGlobalDataStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { usePiyangoStore } from '../../stores/piyangoStore'
  const piyangoStore = usePiyangoStore()
  import { usePiyangoKatilimciStore } from '../../stores/piyangoKatilimciStore'
  const piyangoKatilimciStore = usePiyangoKatilimciStore()
  import { usePiyangoKatilimciValidationStore } from '../../validation/piyangoKatilimciValidationStore'
  const piyangoKatilimciValidationStore = usePiyangoKatilimciValidationStore()
  import { usePiyangoIkramiyeStore } from '../../stores/piyangoIkramiyeStore'
  const piyangoIkramiyeStore = usePiyangoIkramiyeStore()
  import { usePiyangoIkramiyeService } from '../../service/piyangoIkramiyeService'
  const piyangoIkramiyeService = usePiyangoIkramiyeService()

  const loaded = ref<boolean>(true)
  const today = ref<Date>(new Date())
  const ilanTarihi = ref<Date>(new Date(piyangoStore.lotteryIlanTarihi!))
  const ilceList = ref<Record<string, any>[]>([])

  const FormChanged = () => {
    piyangoKatilimciValidationStore.userFormChanged = true
  }

  const TalihliChanged = (t: string) => {
    if (t === 'asil')
      piyangoKatilimciStore.piyangoKatilimciUserFormData.yedekTalihli = false

    if (t === 'yedek')
      piyangoKatilimciStore.piyangoKatilimciUserFormData.asilTalihli = false

    piyangoKatilimciValidationStore.userFormChanged = true
  }

  const ChangeIl = async (e: Event, v: string | number, d: Record<string, any>) => {
    piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce = ''
    if (Object.keys(d).length === 0) {
      ilceList.value = []
      return
    }
    const ilceler = await dataStore.GetIlcelerByIlId(d.id)
    ilceList.value.splice(0, ilceList.value.length, ...ilceler)
    piyangoKatilimciValidationStore.userFormChanged = true
  }
  const ilceDisabled = computed<boolean>(() => {
    return (
      piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce === null ||
      piyangoKatilimciStore.piyangoKatilimciUserFormData.il === '' ||
      piyangoKatilimciStore.piyangoKatilimciUserFormData.il === null ||
      ilceList.value.length === 0
    )
  })
  onBeforeMount(async () => {
    await dataStore.GetIlList()
    await piyangoIkramiyeService.GetAllIkramiyeler()

    if (
      piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce !== undefined &&
      piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce !== null &&
      piyangoKatilimciStore.piyangoKatilimciUserFormData.ilce !== ''
    ) {
      const selectedIl = dataStore.GetIlByName(piyangoKatilimciStore.piyangoKatilimciUserFormData.il)
      if (selectedIl !== undefined) {
        const ilceler = await dataStore.GetIlcelerByIlId(selectedIl.id)
        ilceList.value.splice(0, ilceList.value.length, ...ilceler)
      }
    }
  })
</script>
