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

import { InfoCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

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

import type { PriceChangeDialogProps } from "@/types/components/hotelReservation/enterDetails/priceChangeDialog"

export default function PriceChangeDialog({
  isOpen,
  oldPrice,
  newPrice,
  currency,
  onCancel,
  onAccept,
}: PriceChangeDialogProps) {
  const intl = useIntl()
  const title = intl.formatMessage({ id: "The price has increased" })

  return (
    <ModalOverlay
      className={styles.overlay}
      isOpen={isOpen}
      isKeyboardDismissDisabled
    >
      <Modal className={styles.modal}>
        <Dialog aria-label={title} className={styles.dialog}>
          <header className={styles.header}>
            <div className={styles.titleContainer}>
              <InfoCircleIcon height={48} width={48} color="burgundy" />
              <Title
                level="h1"
                as="h3"
                textAlign="center"
                textTransform="regular"
              >
                {title}
              </Title>
            </div>
            <Body textAlign="center">
              {intl.formatMessage({
                id: "The price has increased since you selected your room.",
              })}
              <br />
              {intl.formatMessage({
                id: "You can still book the room but you need to confirm that you accept the new price",
              })}
              <br />
              <span className={styles.oldPrice}>
                {intl.formatNumber(oldPrice, { style: "currency", currency })}
              </span>{" "}
              <strong className={styles.newPrice}>
                {intl.formatNumber(newPrice, { style: "currency", currency })}
              </strong>
            </Body>
          </header>
          <footer className={styles.footer}>
            <Button intent="secondary" onClick={onCancel}>
              {intl.formatMessage({ id: "Cancel" })}
            </Button>
            <Button onClick={onAccept}>
              {intl.formatMessage({ id: "Accept new price" })}
            </Button>
          </footer>
        </Dialog>
      </Modal>
    </ModalOverlay>
  )
}
