<template>
  <div :class="['form-part', formChanged ? 'changed' : '']">
    <div class="form-part-title">
      <h4>Şifre Değiştir</h4>
      <div class="form-part-title-buttons"></div>
    </div>
    <div class="form-part-content">
      <form-input
        required
        type="password"
        modelKey="currentPassword"
        v-model="formData.currentPassword"
        :invalidText="invalidTexts.currentPassword"
        label="Kullandığınız Şifre"
        @keyup="OnKeyup" />
      <form-input
        required
        type="password"
        modelKey="newPassword"
        v-model="formData.newPassword"
        :invalidText="invalidTexts.newPassword"
        label="Yeni Şifre"
        @keyup="OnKeyup" 
        description="Yeni şifreniz en az 6 karakter olmalıdır"
        minlength="6"/>
      <form-input
        required
        type="password"
        modelKey="confirmNewPassword"
        v-model="formData.confirmNewPassword"
        :invalidText="invalidTexts.confirmNewPassword"
        label="Yeni Şifre Tekrar"
        @keyup="OnKeyup" />
      <div class="form-item" v-if="formChanged">
        <button class="button-c button-save" @click="SaveData">Kaydet</button>
        <button class="button-c button-cancel" @click="CancelSave">Vazgeç</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useValidationStore } from '@/stores/validationStore'
  const validationStore = useValidationStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()

  const formChanged = ref<boolean>(false)
  const formData = reactive<Record<string, any>>({
    emailAddress: usersStore.userMail,
    currentPassword: '',
    newPassword: '',
    confirmNewPassword: ''
  })
  const isFormValid = ref<boolean>(true)
  const invalidTexts = ref<Record<string, any>>({})
  const safeData = reactive<Record<string, any>>(Object.assign({}, formData))

  const OnKeyup = () => {
    formChanged.value = true
  }

  const IsFieldEmpty = (field: string, text: string) => {
    if (validationStore.checkEmpty(formData[field]) || formData[field] === 0) {
      invalidTexts.value[field] = text
      isFormValid.value = false
    } else {
      delete invalidTexts.value[field]
    }
  }

  const FormCheck = (): boolean => {
    IsFieldEmpty('currentPassword', 'Lütfen şu an kullandığınız şifreyi giriniz.')
    IsFieldEmpty('newPassword', 'Yeni bir şifre belirlemelisiniz')
    IsFieldEmpty('confirmNewPassword', 'Yeni şifrenizin tekrarını girmelisiniz')

    if (!validationStore.checkEmpty(formData.confirmNewPassword)) {      
      if (formData.newPassword !== formData.confirmNewPassword) {
        invalidTexts.value.confirmNewPassword =
          'Belirlediğinzi şifreden farklı bir şifre yazdınız. Lütfen tekrar giriniz.'
        isFormValid.value = false
      } else {
        delete invalidTexts.value.confirmNewPassword
      }
    }

    if (!validationStore.checkEmpty(formData.newPassword)) {      
      if (formData.newPassword <6) {
        invalidTexts.value.confirmNewPassword =
          'Belirlediğinzi şifre en az 6 karakter olmalıdır.'
        isFormValid.value = false
      } else {
        delete invalidTexts.value.confirmNewPassword
      }
    }
    formData.emailAddress = usersStore.userMail
    return isFormValid.value
  }

  const SaveData = async () => {
    if (FormCheck()) {
      let res: any
      res = await dataStore.dataPost('Auth/updatepassword/', {
        data: formData
      })

      if (res !== 'errorfalse') {
        Object.assign(formData,safeData)
        formChanged.value = false
      }
    } else {
      isFormValid.value = true
    }
  }
  const CancelSave = () => {
    Object.assign(formData, safeData)
    formChanged.value = false
  }
</script>
