import { type FC } from 'react';

import Dialog, { type DialogProps } from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent, {
  type DialogContentProps,
} from '@material-hu/mui/DialogContent';
import DialogTitle, {
  type DialogTitleProps,
} from '@material-hu/mui/DialogTitle';
import LinearProgress from '@material-hu/mui/LinearProgress';

import Button, {
  type ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type AcceptCancelDialogProps = Omit<DialogProps, 'title'> & {
  title?: string | JSX.Element;
  onCancel?: (event: React.MouseEvent) => void;
  onAccept?: (event: React.MouseEvent) => void;
  showCancel?: boolean;
  disabled?: boolean;
  isLoading?: boolean;
  acceptLabel?: string;
  cancelLabel?: string;
  titleProps?: DialogTitleProps;
  contentProps?: DialogContentProps;
  enabledTitle?: boolean;
  variantAcceptButton?: ButtonProps['variant'];
  variantCancelButton?: ButtonProps['variant'];
};

export const AcceptCancelDialog: FC<
  React.PropsWithChildren<AcceptCancelDialogProps>
> = props => {
  const {
    children,
    title,
    onCancel,
    onAccept,
    showCancel = false,
    disabled = false,
    isLoading = false,
    acceptLabel,
    cancelLabel,
    titleProps,
    contentProps,
    enabledTitle = true,
    variantAcceptButton = 'contained',
    variantCancelButton = 'outlined',
    ...dialogProps
  } = props;

  const { t } = useTranslation();

  return (
    <Dialog {...dialogProps}>
      {isLoading && <LinearProgress />}
      {enabledTitle && (
        <DialogTitle {...titleProps}>{title || t('CONFIRM')}</DialogTitle>
      )}
      <DialogContent {...contentProps}>{children}</DialogContent>
      <DialogActions>
        {showCancel && (
          <Button
            variant={variantCancelButton}
            disabled={isLoading}
            onClick={onCancel}
            sx={
              variantCancelButton === 'outlined'
                ? { color: 'text.primary' }
                : undefined
            }
          >
            {cancelLabel || t('CANCEL')}
          </Button>
        )}
        <Button
          variant={variantAcceptButton}
          disabled={disabled || isLoading}
          onClick={onAccept}
        >
          {acceptLabel || t('ACCEPT')}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default AcceptCancelDialog;