"use client"

import {
  Dialog,
  DialogTrigger,
  Heading,
  Modal,
  ModalOverlay,
} from "react-aria-components"
import { useIntl } from "react-intl"

import { trpc } from "@/lib/trpc/client"

import { Delete } from "@/components/Icons"
import LoadingSpinner from "@/components/LoadingSpinner"
import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"

import styles from "./deleteCreditCardConfirmation.module.css"

import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"

export default function DeleteCreditCardConfirmation({
  card,
}: DeleteCreditCardConfirmationProps) {
  const intl = useIntl()
  const trpcUtils = trpc.useUtils()

  const deleteCard = trpc.user.creditCard.delete.useMutation({
    onSuccess() {
      trpcUtils.user.creditCards.invalidate()

      toast.success(
        intl.formatMessage({ id: "Your card was successfully removed!" })
      )
    },
    onError() {
      toast.error(
        intl.formatMessage({
          id: "Something went wrong and we couldn't remove your card. Please try again later.",
        })
      )
    },
  })

  const lastFourDigits = card.truncatedNumber.slice(-4)

  return (
    <div>
      <DialogTrigger>
        <Button variant="icon" theme="base" intent="text">
          <Delete color="burgundy" />
        </Button>
        <ModalOverlay className={styles.overlay} isDismissable>
          <Modal className={styles.modal}>
            <Dialog role="alertdialog">
              {({ close }) => (
                <div className={styles.container}>
                  <Heading slot="title" className={styles.title}>
                    {intl.formatMessage({
                      id: "Remove card from member profile",
                    })}
                  </Heading>
                  <p className={styles.bodyText}>
                    {`${intl.formatMessage({
                      id: "Are you sure you want to remove the card ending with",
                    })} ${lastFourDigits} ${intl.formatMessage({ id: "from your member profile?" })}`}
                  </p>

                  {deleteCard.isPending ? (
                    <LoadingSpinner />
                  ) : (
                    <div className={styles.buttonContainer}>
                      <Button intent="secondary" theme="base" onClick={close}>
                        {intl.formatMessage({ id: "No, keep card" })}
                      </Button>
                      <Button
                        intent="primary"
                        theme="base"
                        onClick={() => {
                          deleteCard.mutate(
                            { creditCardId: card.id },
                            { onSettled: close }
                          )
                        }}
                      >
                        {intl.formatMessage({ id: "Yes, remove my card" })}
                      </Button>
                    </div>
                  )}
                </div>
              )}
            </Dialog>
          </Modal>
        </ModalOverlay>
      </DialogTrigger>
    </div>
  )
}