import type { ReactNode } from "react";
import type { Blocker } from "react-router";

import {
  Button,
  Dialog,
  Flex,
  Modal,
  ModalOverlay,
  Text,
  View,
} from "@phoenix/components";
import {
  DialogCloseButton,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTitleExtra,
} from "@phoenix/components/core/dialog";

function ConfirmNavigationDialogFooter({ blocker }: { blocker: Blocker }) {
  return (
    <View padding={"size-100"} borderTopColor="default" borderTopWidth={"thin"}>
      <Flex justifyContent={"end"} gap={"size-100"}>
        <Button onPress={() => blocker.reset && blocker.reset()} size="S">
          Cancel
        </Button>
        <Button
          variant="primary"
          onPress={() => blocker.proceed && blocker.proceed()}
          size="S"
        >
          Confirm
        </Button>
      </Flex>
    </View>
  );
}

export function ConfirmNavigationDialog({
  blocker,
  message = "Are you sure you want to leave the page? Some changes may not be saved.",
}: {
  blocker: Blocker;
  message?: ReactNode;
}) {
  return (
    <ModalOverlay isDismissable={false} isOpen={blocker.state === "blocked"}>
      <Modal size="S">
        <Dialog>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Confirm Navigation</DialogTitle>
              <DialogTitleExtra>
                <DialogCloseButton close={() => blocker.reset?.()} />
              </DialogTitleExtra>
            </DialogHeader>
            <View padding="size-200">
              <Text>{message}</Text>
            </View>
            <ConfirmNavigationDialogFooter blocker={blocker} />
          </DialogContent>
        </Dialog>
      </Modal>
    </ModalOverlay>
  );
}
