<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"></div>
</template>

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

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

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

const tr = {
  'Помилка Telegram авторизації': 'Ошибка авторизации Telegram',
  'Користувачу ': 'Пользователю ',
  ' не дозволено входити': ' не разрешен вход'
}
const t = tf.bind({ tr })

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

  document.getElementById('telegram').appendChild(s)
})

// TELEGRAM
const telegramError = ref('')

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

  try {
    const respFromRun = await fetch('/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) {
      const check = checkToken(getToken())
      if (check.result === 'ok') {
        emit('authorized', check.decoded)
      } else {
        telegramError.value = t`Користувачу ${check.userName} не дозволено входити`
      }
    } else {
      telegramError.value = t`Помилка Telegram авторизації`
    }
  } catch (err) {
    telegramError.value = err
  }
}
</script>

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