<template>
  <div v-if="googleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
    {{ googleError }}
  </div>
  <div id="buttonDiv" />
</template>

<script setup>
import tfm from '@nitra/tfm'
import { checkToken } from '@nitra/vite-boot/token'

import { ref } from 'vue'

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

const googleError = ref('')

const props = defineProps({
  id: { type: String, required: true },
  verifyOnly: { type: Boolean, default: false }
})

const baseUrl = import.meta.env.BASE_URL

// событие когда пользователь авторизован
const emit = defineEmits(['verify', 'authorized'])

// Завантажуємо скрипт Google асинхронно
const scriptTag = document.createElement('script')
scriptTag.src = 'https://accounts.google.com/gsi/client'
scriptTag.async = true
scriptTag.defer = true
// Та коли він завантажився ініціалізуємо його
scriptTag.addEventListener('load', () => {
  globalThis.google.accounts.id.initialize({
    client_id: props.id,
    callback: handleCredentialResponse
  })
  // рендеримо кнопку з атрибутами
  globalThis.google.accounts.id.renderButton(document.querySelector('#buttonDiv'), {
    theme: 'filled_blue',
    size: 'large',
    text: 'continue_with'
  })
})
document.head.append(scriptTag)

// Коли відповідь від кнопки прийшла
/**
 *
 * @param {object} credentialResponse - Відповідь від кнопки
 */
async function handleCredentialResponse(credentialResponse) {
  const credential = credentialResponse.credential
  googleError.value = ''

  if (!credentialResponse.clientId || !credential) {
    googleError.value = t`Помилка Google авторизації`
    return
  }

  try {
    const respFromRun = await fetch(`${baseUrl}auth/google`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        credential,
        verifyOnly: props.verifyOnly
      })
    })

    const res = await respFromRun.json()
    if (props.verifyOnly) {
      emit('verify', res)
      return
    }

    if (res?.token) {
      const check = checkToken(res.token)
      if (check.result === 'ok') {
        emit('authorized', check.decoded)
      } else {
        googleError.value = t`Користувачу ${check.userName} не дозволено входити`
      }
    } else {
      googleError.value = t`Помилка Google авторизації`
    }
  } catch (error) {
    googleError.value = error
  }
}

/**
 * LOCALIZATION
 * @returns {object} translations
 */
function getTr() {
  return {
    'Помилка Google авторизації': { ru: 'Ошибка авторизации Google' },
    'Користувачу ': { ru: 'Пользователю ' },
    ' не дозволено входити': { ru: ' не разрешен вход' }
  }
}
</script>
