<template>
  <div>
    <q-btn
      @click="forgotPassword = true"
      :label="t`Забули пароль?`"
      color="primary"
      padding="8px 2px 0px"
      class="full-width q-mt-md"
      align="right"
      no-caps
      flat />

    <!-- Диалог - подтверждение удаления категории  -->
    <n-dialog v-model="forgotPassword" @confirm="restorePassword" :title="t`Відновлення паролю`" :button="t`Відновити`">
      <div v-if="forgotError" class="text-white text-red q-pa-xs text-center" style="background: #f002">
        {{ forgotError }}
      </div>
      <q-input
        v-model="forgotLogin"
        :label="t`Ваш телефон або email`"
        :rules="[val => !!val || t`вкажіть телефон чи email`]"
        outlined
        hide-bottom-space />
    </n-dialog>
  </div>
</template>

<script setup>
import { Notify } from 'quasar'
import { ref } from 'vue'
import NDialog from './NDialog.vue'
import tfm from '@nitra/tfm'

const t = tfm.bind({ tr: getTr() })

const baseUrl = import.meta.env.BASE_URL

const forgotPassword = ref(false)
const forgotLogin = ref('')
const forgotError = ref('')

const restorePassword = async () => {
  forgotError.value = ''
  try {
    const response = await fetch(`${baseUrl}auth/forgot-pass`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ login: forgotLogin.value })
    })

    const res = await response.json()

    if (res.error) {
      forgotError.value = t`Помилка: ${JSON.stringify(res.error)}`
      return
    }

    if (!res.type) {
      forgotError.value = t`Некоректно вказано email або номер телефону`
      return
    }

    if (res.type === 'email') {
      Notify.create({
        type: 'positive',
        message: t`Новий пароль надіслано на email ${forgotLogin.value}`
      })
    } else if (res.type === 'phone') {
      Notify.create({
        type: 'positive',
        message: t`Новий пароль надіслано на номер ${forgotLogin.value}`
      })
    }

    forgotPassword.value = false
  } catch (error) {
    forgotError.value = error
  }
}

/**
 * LOCALIZATION
 * @returns {object} translations
 */
function getTr() {
  return {
    'Забули пароль?': { ru: 'Забыли пароль?' },
    'Відновлення паролю': { ru: 'Восстановление пароля' },
    Відновити: { ru: 'Восстановить' },
    'Ваш телефон або email': { ru: 'Ваш телефон или email' },
    'вкажіть телефон чи email': { ru: 'укажите телефон или email' },
    'Помилка: ': { ru: 'Ошибка: ' },
    'Некоректно вказано email або номер телефону': { ru: 'Некорректно указан email или номер телефона' },
    'Новий пароль надіслано на email ': { ru: 'Новый пароль отправлен на email ' },
    'Новий пароль надіслано на номер ': { ru: 'Новый пароль отправлен на номер ' }
  }
}
</script>
