"use client"
import {
  Dialog as AriaDialog,
  DialogTrigger,
  Modal,
  ModalOverlay,
} from "react-aria-components"

import Body from "@scandic-hotels/design-system/Body"
import Subtitle from "@scandic-hotels/design-system/Subtitle"

import LoadingSpinner from "@/components/LoadingSpinner"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"

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

import type { DialogProps } from "@/types/components/dialog"

export default function Dialog({
  bodyText,
  cancelButtonText,
  proceedHref,
  proceedIsPending = false,
  proceedOnClick = () => {},
  proceedText,
  titleText,
  trigger,
}: DialogProps) {
  return (
    <DialogTrigger>
      {trigger}
      <ModalOverlay className={styles.overlay} isDismissable>
        <Modal>
          <AriaDialog role="alertdialog" className={styles.dialog}>
            {({ close }) => (
              <section className={styles.modal}>
                <header className={styles.header}>
                  <Subtitle textAlign="center">{titleText}</Subtitle>
                  <Body textAlign="center">{bodyText}</Body>
                </header>
                {proceedIsPending ? (
                  <LoadingSpinner />
                ) : (
                  <footer className={styles.footer}>
                    <Button
                      intent="secondary"
                      onPress={close}
                      size="medium"
                      theme="base"
                    >
                      {cancelButtonText}
                    </Button>
                    {proceedHref ? (
                      <Button
                        asChild
                        intent="primary"
                        size="medium"
                        theme="base"
                      >
                        <Link color="none" href={proceedHref}>
                          {proceedText}
                        </Link>
                      </Button>
                    ) : (
                      <Button
                        intent="primary"
                        onPress={() => {
                          proceedOnClick(close)
                        }}
                        size="medium"
                        theme="base"
                      >
                        {proceedText}
                      </Button>
                    )}
                  </footer>
                )}
              </section>
            )}
          </AriaDialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  )
}
