import React from 'react';
import {View} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {FileCard} from '@components/_HuGo/FileCard';
import {getIconByTypeOrExtension} from '@components/_custom/Attachment/constants';
import {Attachment} from '@interfaces/attachments';
import {getFileNameExtension} from '@shared/utils';

import {styles} from './styles';

interface Props {
  files: Attachment[];
  onDeleteFile: (attachment: Attachment) => void;
}

export function FilesDisplayer({files, onDeleteFile}: Props) {
  const hasOneFile = files.length === 1;

  const onPressDelete = (item: Attachment) => () => onDeleteFile(item);

  return (
    <ScrollView
      horizontal
      bounces={!hasOneFile}
      contentContainerStyle={[
        styles.filesContainer,
        hasOneFile && styles.fullWidth,
      ]}
      showsHorizontalScrollIndicator={false}>
      {files.map(item => {
        const extension = getFileNameExtension(item.name ?? '').toLowerCase();
        const Icon = getIconByTypeOrExtension(undefined, extension);

        return (
          <View
            key={`${item.id}`}
            style={[
              styles.fileCard,
              hasOneFile ? styles.fullWidth : styles.partialWidth,
            ]}>
            <FileCard
              id={`${item.id}`}
              name={item.name ?? ''}
              onDeleteFile={onPressDelete(item)}
              path={item.url}
              size={item.bytes!}
              Icon={Icon}
            />
          </View>
        );
      })}
    </ScrollView>
  );
}
