import Clerk from '@clerk/clerk-js'
import {loginStyle} from './sign-in'

window.Webflow ||= []
window.Webflow.push(async () => {
  const path = window.location.pathname
  const clerk = new Clerk('pk_live_Y2xlcmsuYWthYWluZmx1ZW5jZWh1Yi5jb20k')
  await clerk.load()
  const connect = document.querySelector('#connect') as HTMLDivElement
  const isConnect = clerk.session !== undefined && clerk.session !== null

  connect.addEventListener('click', () => {
    if (isConnect) {
      clerk.signOut()
      connect.innerHTML = 'Connexion'
      window.location.reload()
    } else window.location.href = 'index.php/sign-in/'
  })

  if (path === '/sign-in/' || path === 'index.php/sign-in/') {
    const signIn: HTMLDivElement | null = document.querySelector('#signIn')
    console.log(signIn)
    if (!signIn) return
    clerk.mountSignIn(signIn, {
      appearance: loginStyle,
      signUpUrl: '/sign-up',
    })
  }

  if (path === '/sign-up/' || path === 'index.php/sign-up/') {
    const signUp: HTMLDivElement | null = document.querySelector('#signUp')
    console.log(signUp)
    if (!signUp) return
    clerk.mountSignUp(signUp, {
      appearance: loginStyle,
      signInUrl: '/sign-in',
    })
  }

  if (clerk.session !== undefined && clerk.session !== null) {
    connect.innerHTML = 'Déconnexion'
  }
})