import type { FC } from 'react';
import { useTranslation, Trans } from 'react-i18next';

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

import {
  AcceptCancelDialog,
  AcceptCancelDialogProps,
} from 'src/components/AcceptCancelDialog';

export type ConfirmChangeChannelDialogProps = AcceptCancelDialogProps & {
  name?: string;
};

export const ConfirmChangeChannelDialog: FC<
  ConfirmChangeChannelDialogProps
> = props => {
  const { name, open, onCancel, onBackdropClick, onAccept, isLoading } = props;

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

  return (
    <AcceptCancelDialog
      open={open}
      title={
        <Trans
          i18nKey="CONFIRM_CHANGE_TOPIC"
          values={{ nameTopic: name }}
          t={t}
          components={{ bold: <strong /> }}
        />
      }
      sx={{
        '& .MuiTypography-root': {
          fontWeight: 400,
        },
      }}
      onCancel={onCancel}
      onBackdropClick={onBackdropClick}
      onAccept={onAccept}
      isLoading={isLoading}
      acceptLabel={t('ACCEPT_CHANGE_TOPIC')}
      variantAcceptButton="contained"
      variantCancelButton="outlined"
      showCancel
    >
      <Typography
        color="textSecondary"
        sx={{ fontSize: '12px' }}
      >
        {t('NO_REVERT_CHANGE_TOPIC')}
      </Typography>
    </AcceptCancelDialog>
  );
};

export default ConfirmChangeChannelDialog;