import type { WithAuthenticatorProps } from "@aws-amplify/ui-react"
import { withAuthenticator } from "@aws-amplify/ui-react"
import { getCurrentUser } from "aws-amplify/auth"

import "@aws-amplify/ui-react/styles.css"

import { Amplify } from "aws-amplify"
import { useEffect, useState } from "react"

import { Storage } from "@plasmohq/storage"

import config from "../amplify_outputs.json"

Amplify.configure(config)

interface Props extends WithAuthenticatorProps {
  isPassedToWithAuthenticator: boolean
}

const storage = new Storage()

function AuthPage({ signOut, user }: Props) {
  const [redirecting, setRedirecting] = useState(true)

  useEffect(() => {
    const handleRedirect = async () => {
      try {
        const currentUser = await getCurrentUser()
        if (currentUser) {
          const redirectUrl = await storage.get("redirectUrl")
          if (redirectUrl) {
            await storage.remove("redirectUrl")
            window.location.href = redirectUrl
          }
        }
      } catch (error) {
        console.error("User not authenticated", error)
      } finally {
        setRedirecting(false)
      }
    }

    handleRedirect()
  }, [])

  if (redirecting) return <p>Loading...</p>

  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  )
}

export default withAuthenticator(AuthPage)

export async function getStaticProps() {
  return {
    props: {
      isPassedToWithAuthenticator: true
    }
  }

import type { WithAuthenticatorProps } from "@aws-amplify/ui-react"
import { withAuthenticator } from "@aws-amplify/ui-react"
import { getCurrentUser } from "aws-amplify/auth"

import "@aws-amplify/ui-react/styles.css"

import { Amplify } from "aws-amplify"
import { useEffect, useState } from "react"

import { Storage } from "@plasmohq/storage"

import config from "../amplify_outputs.json"

Amplify.configure(config)

interface Props extends WithAuthenticatorProps {
  isPassedToWithAuthenticator: boolean
}

const storage = new Storage()

function AuthPage({ signOut, user }: Props) {
  const [redirecting, setRedirecting] = useState(true)

  useEffect(() => {
    const handleRedirect = async () => {
      try {
        const currentUser = await getCurrentUser()
        if (currentUser) {
          const redirectUrl = await storage.get("redirectUrl")
          if (redirectUrl) {
            await storage.remove("redirectUrl")
            window.location.href = redirectUrl
          }
        }
      } catch (error) {
        console.error("User not authenticated", error)
      } finally {
        setRedirecting(false)
      }
    }

    handleRedirect()
  }, [])

  if (redirecting) return <p>Loading...</p>

  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  )
}

export default withAuthenticator(AuthPage)

export async function getStaticProps() {
  return {
    props: {
      isPassedToWithAuthenticator: true
    }
  }