import { FC } from 'react';

import Dialog from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogContentText from '@material-hu/mui/DialogContentText';
import DialogTitle from '@material-hu/mui/DialogTitle';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type CancelPostEditionAlertProps = {
  open: boolean;
  onClose: () => void;
  onDiscard: () => void;
};

const CancelPostEditionAlert: FC<CancelPostEditionAlertProps> = props => {
  const { open, onClose, onDiscard } = props;

  const { t } = useTranslation(['post']);

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
    >
      <DialogTitle>{t('post:discard_changes')}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          {t('post:discard_changes_description')}
        </DialogContentText>
      </DialogContent>
      <DialogActions sx={{ display: 'flex', justifyContent: 'space-around' }}>
        <Button onClick={onClose}>{t('post:keep_editing')}</Button>
        <Button
          color="error"
          onClick={onDiscard}
        >
          {t('post:discard')}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CancelPostEditionAlert;