import React, {Dispatch, SetStateAction} from 'react';
import {TouchableOpacity} from 'react-native';
import {useTranslation} from 'react-i18next';
import {COMMON_REACTIONS} from '@shared/constants';
import PublishButton from '@modules/post/screens/PublishPost/components/PublishButton';
import {HandlePublishProps} from '@modules/post/screens/PublishPost/interfaces';
import Text from '@components/Text';
import {Modal} from '@components/Modals';

import {styles} from './styles';

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

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

  return (
    <Modal
      visible={showNotificationDialog}
      onBackdropPress={() => setShowNotificationDialog(false)}
      contentStyle={[styles.dialogContent, styles.popupContainer]}>
      <Text style={styles.reactionText}>{COMMON_REACTIONS.BELL}</Text>
      <Text style={styles.popupText}>
        {t('post.push_notification_description')}
      </Text>
      <PublishButton
        onPress={() => {
          setShowNotificationDialog(false);
          handlePublish({sendPushNotification: true});
        }}
        text={t('post.send_push')}
        style={styles.button}
      />
      <TouchableOpacity
        onPress={() => {
          setShowNotificationDialog(false);
          handlePublish({sendPushNotification: false});
        }}
        style={styles.withoutNotificationButton}>
        <Text style={styles.buttonText}>
          {t('post.continue_without_notification')}
        </Text>
      </TouchableOpacity>
    </Modal>
  );
}

export default NotificationDialog;