import { YStack } from '@junwon/aesthetics'
import { RouterProvider, useRouterContext } from './providers/RouterProvider'
import { VisaProvider, useVisa } from './providers/VisaProvider'

import { Index } from './pages/Index'
import { SignIn } from './pages/SignIn'
import { VerifySignIn } from './pages/VerifySignIn'
import { ManageAccount } from './pages/ManageAccount'
import { UpdateAccount } from './pages/UpdateAccount'
import { VerifyUpdateAccount } from './pages/VerifyUpdateAccount'
import { DeleteAccount } from './pages/DeleteAccount'
import { ManageMembership } from './pages/ManageMembership'
import { ActionBar } from './components/ActionBar'

function ShowPage() {
  const { route } = useRouterContext()

  switch (route) {
    case '/':
      return <Index />
    case '/signin':
      return <SignIn />
    case '/signin/verify':
      return <VerifySignIn />
    case '/account':
      return <ManageAccount />
    case '/account/update':
      return <UpdateAccount />
    case '/account/update/verify':
      return <VerifyUpdateAccount />
    case '/account/delete':
      return <DeleteAccount />
    case '/membership':
      return <ManageMembership />
    default:
      return <Index />
  }
}

interface VisaCenterProps {
  showBackButtonAtRoot?: boolean
  productName?: string | null
}

export function VisaCenter({ showBackButtonAtRoot = false, productName }: VisaCenterProps) {
  return (
    <VisaProvider>
      <RouterProvider productName={productName}>
        <YStack
          f={1}
          m="$5"
          ai="center"
        >
          <YStack
            w="100%"
            maw={540}
          >
            <ActionBar showBackButtonAtRoot={showBackButtonAtRoot} />
            <ShowPage />
          </YStack>
        </YStack>
      </RouterProvider>
    </VisaProvider>
  )
}