import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Spinner} from '@components/_HuGo';
import {LinkPreviewsBodyParam} from '@interfaces/linkPreview';

import LinkPreviewCard from './components/LinkPreviewCard';
import {useLinks} from './hooks/useLinks';
import {styles} from './styles';

interface Props {
  text: string;
  setLinkPreviews: (val: LinkPreviewsBodyParam) => void;
  disableLinking?: boolean;
  show?: boolean;
}

export function LinkPreviewer({setLinkPreviews, text = ''}: Props) {
  const {i18n} = useTranslation();
  const {
    hasLinkPreview,
    currentUrl,
    previewAtIndex,
    isAwaitingPreview,
    onPreviewClose,
  } = useLinks({
    text,
    language: i18n.language,
    setLinkPreviews,
  });

  return hasLinkPreview ? (
    previewAtIndex ? (
      <LinkPreviewCard
        data={{
          ...previewAtIndex,
          url: currentUrl!,
        }}
        onClose={onPreviewClose}
        disabled
        showCloseButton
      />
    ) : isAwaitingPreview ? (
      <View style={styles.spinnerContainer}>
        <Spinner />
      </View>
    ) : null
  ) : null;
}