import { FC, ReactElement, useEffect } from 'react';

import { useModal } from '@material-hu/hooks/useModal';
import Typography from '@material-hu/mui/Typography';

import HuDialog from '@material-hu/components/design-system/Dialog';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type NotificationAlertProps = {
  open: boolean;
  onClose: () => void;
  onSendNotification: (bool: boolean) => void;
  isGroups?: boolean;
};

const NotificationAlert: FC<NotificationAlertProps> = props => {
  const { open, onClose, onSendNotification, isGroups = false } = props;

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

  const onCancel = () => {
    onSendNotification(false);
    onClose();
  };

  const onSubmit = () => {
    onSendNotification(true);
    onClose();
  };

  useEffect(() => {
    if (open) {
      showModal();
    } else {
      closeModal();
    }
  }, [open]);

  const descriptionKey = isGroups
    ? 'post:notification_description_groups'
    : 'post:notification_description';

  const { modal, showModal, closeModal } = useModal(
    () => (
      <HuDialog
        onClose={onClose}
        title={t('post:send_push_notification')}
        body={<Typography>{t(descriptionKey)}</Typography>}
        primaryButtonProps={{
          children: t('post:send_with_notification'),
          onClick: onSubmit,
        }}
        secondaryButtonProps={{
          children: t('post:send_without_notification'),
          onClick: onCancel,
        }}
      />
    ),
    {
      onClose: () => {
        closeModal();
        onClose();
      },
    },
  );

  return modal as ReactElement;
};

export default NotificationAlert;