// https://github.com/remix-run/react-router/blob/main/examples/navigation-blocking/src/app.tsx
// https://stackoverflow.com/questions/75135147/react-router-dom-v6-useblocker

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from "@mui/material";
import React from "react";

import { unstable_useBlocker as useBlocker } from "react-router-dom";

export function ConfirmLeaveWithoutSaveDialog(p: {
  shouldBlock: boolean;
}): React.ReactElement {
  let blocker = useBlocker(p.shouldBlock);

  React.useEffect(() => {
    if (blocker.state === "blocked" && !p.shouldBlock) {
      blocker.proceed();
    }
  }, [blocker, p.shouldBlock]);

  const cancelNavigation = () => {
    blocker.reset?.();
  };

  const confirmNavigation = () => {
    blocker.proceed?.();
  };

  return (
    <Dialog
      open={blocker.state === "blocked"}
      onClose={cancelNavigation}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">
        Quitter sans enregistrer ?
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          Voulez-vous vraiment quitter cette page sans enregistrer vos
          modifications ?
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={confirmNavigation as any}>Quitter la page</Button>
        <Button onClick={cancelNavigation as any} autoFocus>
          Rester sur la page
        </Button>
      </DialogActions>
    </Dialog>
  );
}