<template>
  <div
    :class="['form-part', customerIrtibatValidationStore.formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>İrtibat Kurulacak Kişi</h4>
      <div class="form-part-title-buttons"></div>
    </div>
    <div class="form-part-content" v-if="customerIrtibatStore.loaded">
      <form-input
        modelKey="firstName"
        v-model="customerIrtibatStore.customerIrtibatForm.firstName"
        required
        half
        label="Ad"
        minlength="2"
        @keyup="FormChanged"
        :invalidText="customerIrtibatValidationStore.invalidTexts.firstName"
        @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />

      <form-input
        modelKey="lastName"
        v-model="customerIrtibatStore.customerIrtibatForm.lastName"
        required
        half
        label="Soyadı"
        minlength="2"
        :invalidText="customerIrtibatValidationStore.invalidTexts.lastName"
        @keyup="FormChanged"
        @keydown="validationStore.allowLettersWithKeysExtra($event, /^[ ]*$/)" />

      <form-input
        type="email"
        modelKey="email"
        v-model="customerIrtibatStore.customerIrtibatForm.email"
        required
        half
        label="E-posta adresi"
        placeholder="eposta@alanadi.com"
        :invalidText="customerIrtibatValidationStore.invalidTexts.email"
        @keyup="FormChanged" />

      <form-input
        type="tel"
        modelKey="phone"
        v-model="customerIrtibatStore.customerIrtibatForm.phone"
        required
        half
        label="Telefon Numarası"
        placeholder="5554443322"
        @keyup="FormChanged"
        @keydown="validationStore.allowNumbersWithKeys"
        maxlength="10"
        minlength="10"
        :invalidText="customerIrtibatValidationStore.invalidTexts.phone" />
      <div
        class="form-item"
        v-if="customerIrtibatStore.isNew || customerIrtibatValidationStore.formChanged">
        <button class="button-c button-save" @click="customerIrtibatService.SaveIrtibat">
          Kaydet
        </button>
        <button
          class="button-c button-cancel"
          @click="customerIrtibatStore.CancelSave"
          v-if="
            !customerIrtibatStore.isNew && customerIrtibatValidationStore.formChanged
          ">
          Vazgeç
        </button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount } from 'vue'
  
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { useCustomerIrtibatStore } from '../../stores/customerIrtibatStore'
  const customerIrtibatStore = useCustomerIrtibatStore()
  import { useCustomerIrtibatValidationStore } from '../../validation/customerIrtibatValidationStore'
  const customerIrtibatValidationStore = useCustomerIrtibatValidationStore()
  import { useCustomerIrtibatService } from '../../service/customerIrtibatService'
  const customerIrtibatService = useCustomerIrtibatService()

  const FormChanged = () => {
    customerIrtibatValidationStore.formChanged = true
  }

  onBeforeMount(async () => {
    await customerIrtibatService.GetIrtibat()
  })
</script>
