import { Button, YStack, Paragraph } from '@junwon/aesthetics'
import { useRouterContext } from '../providers/RouterProvider'
import { useVisa } from '../providers/VisaProvider'
import { Link } from '../components/Link'
import { VisaCard } from '../components/VisaCard'
import { SignOutButton } from '../components/SignOutButton'

export function Index() {
  const { setRoute } = useRouterContext()
  const { isSignedIn, loading, membershipState } = useVisa()

  if (loading) {
    return (
      <YStack
        f={1}
        pt="$6"
        pb="$6"
        ai="center"
        jc="center"
      >
        <Paragraph my="$6">Loading...</Paragraph>
      </YStack>
    )
  }

  return (
    <YStack
      f={1}
      gap="$6"
      pt="$6"
      pb="$6"
    >
      <VisaCard />

      {!isSignedIn && (
        <Button
          w="100%"
          bc="#E20606"
          hoverStyle={{ bc: '#E20606' }}
          onPress={() => setRoute('/signin')}
        >
          Sign Up or Sign In
        </Button>
      )}

      {isSignedIn && (
        <Button
          w="100%"
          onPress={() => setRoute('/membership')}
          style={{
            ...(membershipState === 'inactive' && { backgroundColor: '#E20606' }),
          }}
        >
          {membershipState === 'inactive' ? 'Join Membership' : 'Manage Membership'}
        </Button>
      )}

      <Link href="https://junwon.com/privacy">
        <Button w="100%">Privacy Policy</Button>
      </Link>

      <Link href="https://junwon.com/terms">
        <Button w="100%">Terms of Service</Button>
      </Link>

      {isSignedIn && (
        <Button
          w="100%"
          onPress={() => setRoute('/account')}
        >
          Manage Account
        </Button>
      )}

      <Link href="mailto:support@junwon.com">
        <Button w="100%">Contact Support</Button>
      </Link>

      {isSignedIn && <SignOutButton />}
    </YStack>
  )
}