import React from 'react';
import {useTranslation} from 'react-i18next';
import {Dialog, Typography} from '@components';
import {showSnackbar} from '@redux/dispatchers';
import {useUserId} from '@redux/selectors';
import {AMPLITUDE_EVENTS} from '@shared/constants';
import {logAmplitudeEvent} from '@shared/utils';

interface Props {
  isVisible: boolean;
  onClose: () => void;
  postId: number;
}

function ConfirmationBottomSheet({postId, isVisible, onClose}: Props) {
  const {t} = useTranslation();
  const userId = useUserId();

  const onAccept = () => {
    onClose();
    logAmplitudeEvent(AMPLITUDE_EVENTS.POST_TRANSLATE_REPORTED, {
      userId,
      postId,
    });
    showSnackbar({title: t('general.report_sent')});
  };

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onClose}
      title={t('general.report_error_title')}
      footer={{
        primaryButton: {
          text: t('general.send_report'),
          onPress: onAccept,
        },
        secondaryButton: {
          text: t('general.cancel'),
          onPress: onClose,
        },
      }}>
      <Typography>{t('general.report_error_description')}</Typography>
    </Dialog>
  );
}

export default ConfirmationBottomSheet;
