import { FC } from 'react';

import './i18n';

import Typography from '@material-hu/mui/Typography';

import { User } from 'src/types/user';
import { getFullName } from 'src/utils/userUtils';

import AcceptCancelDialog from 'src/components/AcceptCancelDialog';
import { useTranslation } from 'src/components/dashboard/chat/ChatThreadInfo/i18n';

export type DeleteParticipantsDialogProps = {
  open: boolean;
  onClose: () => void;
  onDelete: (participant: User) => void;
  isLoading?: boolean;
  participant: User;
};

const DeleteParticipantsDialog: FC<DeleteParticipantsDialogProps> = props => {
  const { open, onClose, onDelete, isLoading = false, participant } = props;

  const { t } = useTranslation();

  const handleDelete = () => {
    onDelete && onDelete(participant);
    handleClose();
  };

  const handleClose = () => {
    onClose && onClose();
  };

  return (
    <AcceptCancelDialog
      open={open}
      title={t('DELETE_PARTICIPANT')}
      acceptLabel={t('DELETE')}
      showCancel
      isLoading={isLoading}
      onAccept={handleDelete}
      onCancel={handleClose}
      onClose={handleClose}
      maxWidth="sm"
    >
      <Typography>
        {t('DELETE_PARTICIPANT_CONFIRMATION', {
          user: getFullName(participant),
        })}
      </Typography>
    </AcceptCancelDialog>
  );
};

export default DeleteParticipantsDialog;
