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

<script setup>
import { checkToken, getToken } from '@nitra/vite-boot/token'
import { onMounted, ref } from 'vue'
import tfm from '@nitra/tfm'

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

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'])

// створення кнопки для авторизации через telegram
onMounted(() => {
  const s = document.createElement('script')
  s.async = true
  s.src = 'https://telegram.org/js/telegram-widget.js?19'
  s.dataset.telegramLogin = props.id
  s.dataset.size = 'large'
  s.dataset.radius = '5'
  s.dataset.onauth = 'onTelegramAuth(user)'
  s.dataset.requestAccess = 'write'

  document.querySelector('#telegram').append(s)
})

// TELEGRAM
const telegramError = ref('')

// натиснута кнопка авторизации через telegram
globalThis.onTelegramAuth = async user => {
  telegramError.value = ''

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

    const res = await respFromRun.json()
    if (props.verifyOnly) {
      emit('verify', res)
      return
    }
    if (res.error) {
      telegramError.value = t`Помилка Telegram авторизації`
    } else {
      const check = checkToken(getToken())
      if (check.result === 'ok') {
        emit('authorized', check.decoded)
      } else {
        telegramError.value = t`Користувачу ${check.userName} не дозволено входити`
      }
    }
  } catch (error) {
    telegramError.value = error
  }
}

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

<style lang="scss">
#telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #54a9eb;
  border-radius: 5px;
  padding: 8px;
}
</style>
