import React, {useRef} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography, CroppedBody} from '@components';
import {logAmplitudeEvent} from '@shared/utils';
import {AMPLITUDE_EVENTS} from '@shared/constants';

import {styles} from './styles';

interface Props {
  body: string;
  richDescription?: string;
  withTitle?: boolean;
}

export function FormDescription({
  body,
  richDescription,
  withTitle = true,
}: Props) {
  const {t} = useTranslation();
  const hasSentAmplitudeEvent = useRef(false);

  const onShowRichText = () => {
    !hasSentAmplitudeEvent.current &&
      logAmplitudeEvent(AMPLITUDE_EVENTS.SERVICE_MGMT_DESCRIPTION_VIEWED);
    hasSentAmplitudeEvent.current = true;
  };

  return (
    <View>
      <View style={styles.header}>
        {withTitle && (
          <Typography style={styles.descriptionTitle}>
            {t('general.description')}
          </Typography>
        )}
      </View>
      <CroppedBody
        body={richDescription || body}
        isHtml={!!richDescription}
        onPressSeeMore={onShowRichText}
      />
    </View>
  );
}