import React from 'react';
import {useTranslation} from 'react-i18next';
import {Attachment, Title, FileAndAttachment} from '@components';
import {navigate} from '@navigation/navigator';
import {Screens} from '@shared/constants';
import {
  canOpenVisualizer,
  handleFileView,
  replaceForwardSlashes,
} from '@shared/utils';

import {styles} from './styles';

interface Props {
  attachments?: FileAndAttachment[];
}

function AttachmentList({attachments}: Props) {
  const {t} = useTranslation();
  const data =
    attachments?.reduce(
      (accum: FileAndAttachment[], file: FileAndAttachment) =>
        file?.name
          ? accum.concat({...file, name: replaceForwardSlashes(file.name)})
          : accum,
      [],
    ) || [];

  const renderItem = (item: FileAndAttachment) => {
    const onPressFile = () => {
      if (canOpenVisualizer(item)) {
        navigate(Screens.FILE_VISUALIZER, {file: item});
      } else {
        handleFileView(item);
      }
    };
    return <Attachment key={item.id} {...item} onPress={onPressFile} />;
  };

  return (
    <>
      <Title
        style={styles.header}
        size="xs"
        title={t('learning.common.supplementary_content')}
      />
      {data.map(renderItem)}
    </>
  );
}

export default AttachmentList;