import React from 'react';
import {TouchableOpacity} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Modal} from '@components/Modals';
import {Typography} from '@components/_core/Typography';
import {SetState} from '@interfaces/generic';
import {COMMON_REACTIONS} from '@shared/constants';

import PublishButton from '../PublishButton';
import {HandlePublishProps} from '../../interfaces';
import {styles} from './styles';

interface Props {
  showNotificationDialog: boolean;
  setShowNotificationDialog: SetState<boolean>;
  handlePublish: ({
    publicationDatetime,
    sendPushNotification,
  }: HandlePublishProps) => void;
}

function NotificationDialog({
  showNotificationDialog,
  setShowNotificationDialog,
  handlePublish,
}: Props) {
  const {t} = useTranslation();

  const onSendPush = () => {
    onCloseModal();
    handlePublish({sendPushNotification: true});
  };
  const onClose = () => {
    onCloseModal();
    handlePublish({sendPushNotification: false});
  };
  const onCloseModal = () => setShowNotificationDialog(false);

  return (
    <Modal
      visible={showNotificationDialog}
      onBackdropPress={onCloseModal}
      contentStyle={[styles.dialogContent, styles.popupContainer]}>
      <Typography style={styles.reactionText}>
        {COMMON_REACTIONS.BELL}
      </Typography>
      <Typography style={styles.popupText}>
        {t('post.push_notification_description')}
      </Typography>
      <PublishButton
        onPress={onSendPush}
        text={t('post.send_push')}
        style={styles.button}
      />
      <TouchableOpacity
        onPress={onClose}
        style={styles.withoutNotificationButton}>
        <Typography style={styles.buttonText}>
          {t('post.continue_without_notification')}
        </Typography>
      </TouchableOpacity>
    </Modal>
  );
}

export default NotificationDialog;
