import React from 'react';
import PropTypes from 'prop-types';

import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@/mui/components';

let registeredCallback = null;

export function setCallback(callback) {
  registeredCallback = callback;
}

export function getCallback() {
  return registeredCallback;
}

export function removeCallback() {
  registeredCallback = null;
}

function ConfirmWarnEdit(props) {
  const handleOnClose = () => {
    removeCallback();
    props.onClose();
  };

  const handleOverwrite = () => {
    const callback = getCallback();
    callback();
    removeCallback();

    props.onOverwrite();
  };

  return (
    <Dialog open={props.open} onClose={props.onClose} maxWidth="md">
      <DialogTitle onClose={props.onClose}>{props.title}</DialogTitle>
      <DialogContent>
        <Typography variant="body2" color="text.primary" fontWeight={400}>
          {props.body}
        </Typography>
      </DialogContent>
      <DialogActions>
        <Button size="small" variant="outlined" color="primary" onClick={handleOnClose}>
          Cancel
        </Button>
        <Button size="small" variant="contained" color="primary" onClick={handleOverwrite}>
          Overwrite
        </Button>
      </DialogActions>
    </Dialog>
  );
}

ConfirmWarnEdit.propTypes = {
  title: PropTypes.node.isRequired,
  body: PropTypes.node.isRequired,
  open: PropTypes.bool.isRequired,

  onClose: PropTypes.func.isRequired,
  onOverwrite: PropTypes.func.isRequired,
};

export default ConfirmWarnEdit;
