import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Button} from '@components';

import {useTranslationFetch} from './hooks/useTranslationFetch';
import {styles} from './styles';
import DisplayTranslation from './components/DisplayTranslation';

interface Props {
  postId: number;
  groupId?: number;
}

function PostTranslation({postId, groupId}: Props) {
  const {t} = useTranslation();
  const [showTranslation, setShowTranslation] = useState(false);

  const {translation, isTranslating, fetchTranslation} = useTranslationFetch({
    groupId,
    postId,
  });

  const onTranslate = () => {
    setShowTranslation(true);
    return fetchTranslation();
  };
  const onHideTranslation = () => setShowTranslation(false);

  return (
    <>
      <View style={styles.container}>
        {showTranslation ? (
          <DisplayTranslation
            isLoading={isTranslating}
            onHide={onHideTranslation}
            text={translation}
            postId={postId}
          />
        ) : (
          <Button
            text={t('general.see_translation')}
            variant="tertiary"
            size="sm"
            style={styles.translateButton}
            onPress={onTranslate}
          />
        )}
      </View>
    </>
  );
}

export default PostTranslation;
