import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconFlag} from '@tabler/icons-react-native';
import {Button, Typography} from '@components';
import {useTheme} from '@shared/theme';

import ConfirmationBottomModal from '../ConfirmationBottomModal';
import {styles} from './styles';
import LoadingTranslations from './components/LoadingTranslations';

interface Props {
  text?: string;
  onHide: () => void;
  isLoading: boolean;
  postId: number;
}

const DisplayTranslation = ({isLoading, text, postId, onHide}: Props) => {
  const [showReportErrorModal, setShowReportErrorModal] = useState(false);
  const {t} = useTranslation();
  const {theme} = useTheme();
  const onReportError = () => setShowReportErrorModal(true);
  const onCloseReportErrorModal = () => setShowReportErrorModal(false);

  return (
    <>
      <View style={[styles.container, {borderColor: theme.neutralDivider}]}>
        {isLoading ? <LoadingTranslations /> : <Typography>{text}</Typography>}
        <View style={styles.buttonsContainer}>
          <Button
            style={styles.button}
            disabled={isLoading}
            variant="tertiary"
            IconLeft={IconFlag}
            text={t('general.report_error')}
            size="sm"
            onPress={onReportError}
          />
          <Button
            style={styles.button}
            variant="tertiary"
            disabled={isLoading}
            size="sm"
            text={t('general.hide')}
            onPress={onHide}
          />
        </View>
      </View>
      <ConfirmationBottomModal
        postId={postId}
        isVisible={showReportErrorModal}
        onClose={onCloseReportErrorModal}
      />
    </>
  );
};

export default DisplayTranslation;
