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 MarketplaceDiscardChangesDialogProps = {
  open: boolean;
  cancelLabel?: string;
  onCancel: () => void;
  onDiscard: () => void;
};

const MarketplaceDiscardChangesDialog: FC<
  MarketplaceDiscardChangesDialogProps
> = props => {
  const { open, cancelLabel, onCancel, onDiscard } = props;

  const { t } = useTranslation(['marketplace', 'general']);

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

export default MarketplaceDiscardChangesDialog;
