'use client'

import { useGuard, User } from '@authing/guard-react18'
import React, { useEffect } from 'react'
import { setCookie, getCookie } from 'cookies-next'
import { USER_TOKEN } from '@/lib/consts'
import { useRouter, useSearchParams } from 'next/navigation'
import '@authing/guard-react18/dist/esm/guard.min.css'

const AuthAuthing = () => {
  const guard = useGuard()
  const router = useRouter()
  const searchParams = useSearchParams()
  const rurl = decodeURIComponent(searchParams.get('rurl') || '/')
  useEffect(() => {
    ;(async () => {
      try {
        const authClient = await guard.getAuthClient()
        const logSt: any = await authClient.checkLoginStatus()
        if (logSt?.status) {
          const authingIDTokenCookie = getCookie(USER_TOKEN)
          if (!authingIDTokenCookie) {
            const authingIDToken = localStorage.getItem('_authing_token')
            if (authingIDToken) {
              setCookie(USER_TOKEN, authingIDToken)
            }
          }
          router.push(rurl)
          return
        }
      } catch (error) {
        console.log('Cannot check login status.')
        console.log(error)
      }
      guard.start('#authing-guard-container').then((userInfo: User) => {
        const authingIDToken = localStorage.getItem('_authing_token')
        if (authingIDToken) {
          setCookie(USER_TOKEN, authingIDToken)
        }
        router.push(rurl)
      })
    })()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  return <div id="authing-guard-container" />
}

export default AuthAuthing