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 MakeAdminParticipantsDialogProps = {
  open: boolean;
  onClose: () => void;
  onMakeAdmin: (participant: User) => void;
  isLoading?: boolean;
  participant: User;
};

const MakeAdminParticipantsDialog: FC<
  MakeAdminParticipantsDialogProps
> = props => {
  const { open, onClose, onMakeAdmin, isLoading = false, participant } = props;

  const { t } = useTranslation();

  const handleMakeAdmin = () => {
    onMakeAdmin && onMakeAdmin(participant);
    handleClose();
  };

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

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

export default MakeAdminParticipantsDialog;