import { YStack, Paragraph, Text, Button } from '@junwon/aesthetics'
import { useRouterContext } from '../providers/RouterProvider'
import { useVisa } from '../providers/VisaProvider'
import { useState } from 'react'
import { ConfirmDialog } from '../components/ConfirmDialog'

export function DeleteAccount() {
  const { setRoute } = useRouterContext()
  const { deleteAccount, profile } = useVisa()
  const [error, setError] = useState('')

  const handleDelete = async () => {
    setError('')
    const response = await deleteAccount()
    if (response.success) {
      setRoute('/')
    } else {
      setError(
        'Failed to delete account from the app. Please send us an email from the email address associated with your account, and we will delete your account immediately, then send you a confirmation email.'
      )
    }
  }

  return (
    <YStack
      f={1}
      jc="center"
      p="$4"
      space="$4"
    >
      <Paragraph>
        Pressing the button below will delete the account which is associated with the email
        address: {profile?.email}.
      </Paragraph>
      <Paragraph>
        To honor the decision of our customers who choose to delete their accounts and to protect
        their privacy, we delete all data associated with deleted accounts immediately.
      </Paragraph>
      <Paragraph>
        Please understand that it will not be possible for us to recover your data after deletion.
      </Paragraph>
      <Paragraph>
        You will still be able to create a new account using the same email address (just without
        the history).
      </Paragraph>
      <Paragraph>
        If you are not sure whether you want to permanently delete your account and want to be safe,
        please contact us, and we will be happy to help you get your questions answered and address
        any outstanding concerns you have about our service.
      </Paragraph>
      <Paragraph>
        If and only if you are sure you know you want to delete your account forever, keep scrolling
        to get to the Delete Account button.
      </Paragraph>

      <YStack
        mt="500%"
        mb="500%"
        gap="$3"
      >
        <ConfirmDialog
          onConfirm={handleDelete}
          trigger={
            <Button theme="red">
              <Text>Delete Account</Text>
            </Button>
          }
          title="Delete Account"
          description={`By pressing the button below, you confirm that you understand that all data associated with the account linked to the email address "${profile?.email}" will be deleted permanently and can never be recovered.`}
          confirmText="I will take full responsibility."
          confirmButtonColor="red"
        />
        {!!error && (
          <Paragraph
            ta="justify"
            col="$red10"
          >
            {error}
          </Paragraph>
        )}
      </YStack>
    </YStack>
  )
}