<script setup lang="ts">
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebaseui/dist/firebaseui.css'
import * as firebaseui from 'firebaseui'
import { FirebaseAuthentication } from '@capacitor-firebase/authentication'
import { getAuth, GoogleAuthProvider, signInWithCredential } from 'firebase/auth'

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

// const ui: any = inject('firebaseAuthUI')
const auth = getAuth()
const firebaseAuthUI = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth)

const uiConfig = {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
    // firebase.auth.GoogleAuthProvider.PROVIDER_ID
  ],
  // signInFlow: 'popup',
  signInFlow: 'redirect',
  callbacks: {
    signInSuccessWithAuthResult(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
    },
    signInFailure(error: any) {
      console.error('Error signing in', error)
    }
  }
  // Other config options...
}
// onMounted(() => ui.start('#auth', uiConfig))

interface Provider {
  name: 'google' | 'microsoft' | 'github'
  icon: string
  signin: () => Promise<void>
  // (options?: SignInOptions) => Promise<SignInResult>
}

const providers: Provider[] = [
  {
    name: 'google',
    icon: 'fa-brands fa-google',
    signin: async () => {
      const result = await FirebaseAuthentication.signInWithGoogle({
        mode: 'redirect'
      })
      const credential = GoogleAuthProvider.credential(result.credential?.idToken)
      await signInWithCredential(auth, credential)
    }
  }
  // {
  //   name: 'microsoft',
  //   icon: 'fa-brands fa-microsoft',
  //   signin: async () => {
  //     const result = await FirebaseAuthentication.signInWithMicrosoft({
  //       mode: 'redirect'
  //     })
  //     const provider = new OAuthProvider('microsoft.com')
  //     const credential = provider.credential({
  //       idToken: result.credential?.idToken,
  //       rawNonce: result.credential?.nonce
  //     })
  //     await signInWithCredential(auth, credential)
  //   }
  // },
  // {
  //   name: 'github',
  //   icon: 'fa-brands fa-github',
  //   signin: async () => {
  //     const result = await FirebaseAuthentication.signInWithGithub({
  //       mode: 'redirect'
  //     })
  //     const provider = new OAuthProvider('github.com')
  //     const credential = provider.credential({
  //       idToken: result.credential?.idToken,
  //       rawNonce: result.credential?.nonce
  //     })
  //     await signInWithCredential(auth, credential)
  //   }
  // }
]
// type Provider = (typeof providers)[number]
const signInWithProvider = async (provider: Provider) => {
  provider.signin()
}

const signingInWithEmail = ref(false)
const signInWithEmail = () => {
  firebaseAuthUI.start('#auth', uiConfig)
  signingInWithEmail.value = true
}
</script>
<template>
  <div class="space-y-2">
    <template v-if="!signingInWithEmail">
      <UIButton
        class="mx-auto !block w-[225px] max-sm:w-full"
        size="sm"
        @click="signInWithProvider(provider)"
        v-for="provider in providers"
        :key="provider.name"
      >
        <i class="fa-fw mr-2" :class="provider.icon"></i>
        Sign in with {{ provider.name }}
      </UIButton>
      <UIButton class="mx-auto !block w-[225px] max-sm:w-full" size="sm" @click="signInWithEmail">
        <i class="fa-fw fa-regular fa-envelope mr-2"></i>
        Sign in with email
      </UIButton>
    </template>
    <div id="auth"></div>
    <!-- <progress
    v-show="props.authenticating"
    class="dui-progress dui-progress-primary w-full"
  ></progress> -->
  </div>
</template>
