<script setup lang="ts">
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'

const emit = defineEmits<{
  signedIn: [authResult: any]
}>()

const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())

const uiConfig = {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    signInSuccessWithAuthResult: function (authResult: any) {
      // var user = authResult.user
      // var credential = authResult.credential
      // var isNewUser = authResult.additionalUserInfo.isNewUser
      // var providerId = authResult.additionalUserInfo.providerId
      // var operationType = authResult.operationType
      // Do something with the returned AuthResult.
      // Return type determines whether we continue the redirect
      // automatically or whether we leave that to developer to handle.
      emit('signedIn', authResult)
      return false
    }
  }
  // Other config options...
}
onMounted(() => ui.start('#auth', uiConfig))
</script>
<template>
  <div id="auth"></div>
</template>
