import React, {useCallback, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {IconBellOff, IconBell} from '@tabler/icons-react-native';
import {Dialog, Typography, useNewPost} from '@components';

interface PushNotificationDialogProps {
  onSubmit?: (withPush: boolean) => void;
  onClose: () => void;
  open: boolean;
  description?: string;
}

export function PushNotificationDialog({
  onClose,
  open,
  onSubmit,
  description,
}: PushNotificationDialogProps) {
  const {t} = useTranslation();
  const {setSendPushNotification} = useNewPost();

  const onContinue = useCallback(
    (withPush: boolean) => () => {
      setSendPushNotification(withPush);
      onSubmit?.(withPush);
    },
    [onSubmit, setSendPushNotification],
  );

  const dialogFooterProps = useMemo(
    () => ({
      primaryButton: {
        text: t('new_post.push_notification_dialog.continue_with_push'),
        onPress: onContinue(true),
        IconLeft: IconBell,
      },
      secondaryButton: {
        text: t('new_post.push_notification_dialog.continue_without_push'),
        onPress: onContinue(false),
        IconLeft: IconBellOff,
      },
    }),
    [t, onContinue],
  );

  return (
    <Dialog
      onClose={onClose}
      isVisible={open}
      titleNumberOfLines={2}
      title={t('new_post.push_notification_dialog.title')}
      footer={dialogFooterProps}>
      <Typography>
        {description ?? t('new_post.push_notification_dialog.description')}
      </Typography>
    </Dialog>
  );
}
