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 Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

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

import CloseButton from 'src/components/dashboard/invitePeople/components/CloseButton';

export type DeactivateLinkModalProps = {
  open: boolean;
  handleClose?: () => void;
  handleDisableInviteCode?: any;
  instanceName: string;
};

export const DeactivateLinkModal: FC<DeactivateLinkModalProps> = props => {
  const { open, handleClose, handleDisableInviteCode, instanceName } = props;

  const { t } = useLokaliseTranslation('invitePeople');

  return (
    <Dialog
      open={open}
      onClose={handleClose}
    >
      <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between' }}>
        {t('deactivate_invite_link_title')}
        <CloseButton handleOnClose={handleClose!} />
      </DialogTitle>
      <DialogContent>
        <DialogContentText>
          {t('deactivate_invite_link_body', { companyName: instanceName })}
        </DialogContentText>
      </DialogContent>
      <DialogActions sx={{ pb: 2, px: 3 }}>
        <Button
          variant="outlined"
          onClick={handleClose}
          sx={{
            px: 3,
            borderRadius: '10px',
            color: '#000',
            borderColor: '#d4d2d2',
            '&:hover': {
              borderColor: '#d4d2d2',
              backgroundColor: '#e7e7e7',
            },
          }}
        >
          <Typography sx={{ fontSize: '16px', fontWeight: 600 }}>
            {t('general:cancel')}
          </Typography>
        </Button>
        <Button
          variant="contained"
          onClick={handleDisableInviteCode}
          color="error"
          sx={{ px: 1, borderRadius: '10px', ml: 2 }}
        >
          <Typography sx={{ fontSize: '16px', fontWeight: 600 }}>
            {t('deactivate_link')}
          </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default DeactivateLinkModal;