<template>
  <div>
    <div v-if="appleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
      {{ appleError }}
    </div>
    <q-btn
      @click="signInWithApple()"
      :loading="checkInProgress"
      icon="fa-brands fa-apple"
      :label="label"
      class="full-width"
      padding="sm md"
      color="black"
      no-caps />
  </div>
</template>

<script setup>
import tfm from '@nitra/tfm'
import { checkToken } from '@nitra/vite-boot/token'
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
import 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js'
import { ref } from 'vue'

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

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

const baseUrl = import.meta.env.BASE_URL

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

const label = props.verifyOnly ? t`Прив’язати Apple ID` : t`Увійти через Apple`

// console.log('props.id', props.id)
const appleSignInOptions = {
  clientId: props.id,
  redirectURI: `https://${globalThis.location.host}/not-used-with-popup`, // Не використовується з popup, але потрібно щоб було задано
  // та й ще це повинен бути той самий домен, який вказаний в apple developer
  // та й поточного домену де кнопка
  scopes: '', // в якості id будемо брати sub
  state: 'origin:web', // Any string of your choice that you may use for some logic. It's optional and you may omit it.
  usePopup: true // Important if we want to capture the data apple sends on the client side.
}

// лоадер
const checkInProgress = ref(false)

// APPLE
const appleError = ref('')

const signInWithApple = async () => {
  checkInProgress.value = true
  appleError.value = ''

  try {
    globalThis.AppleID.auth.init(appleSignInOptions)

    const { authorization } = await globalThis.AppleID.auth.signIn()

    if (!authorization.id_token) {
      checkInProgress.value = false
      return
    }

    // пользователь авторизован
    try {
      const respFromRun = await fetch(`${baseUrl}auth/apple`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          idToken: authorization.id_token,
          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 {
          appleError.value = t`Користувачу ${check.userName} не дозволено входити`
        }
      } else {
        appleError.value = t`Помилка Apple авторизації`
      }
    } catch (error) {
      appleError.value = error
    }
  } catch (error) {
    console.log(error)
  }

  checkInProgress.value = false
}

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