import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Alert} from '@components/_HuGo/Alert';
import {useGetAttachmentsLimit} from '@hooks/useGetAttachmentsLimit';

import {useDisplayAttachments} from '../../hooks/useDisplayAttachments';
import {FilesDisplayer} from './components/FilesDisplayer';
import {MultimediaDisplayer} from './components/MultimediaDisplayer';
import {styles} from './styles';

export function PublishAttachments() {
  const {t} = useTranslation();
  const {maxSizeString} = useGetAttachmentsLimit();
  const {
    files,
    hasMaxSizeError,
    multimedia,
    onClearSizeError,
    onDeleteFile,
    onDeleteMultimedia,
  } = useDisplayAttachments();

  return (
    <View style={styles.container}>
      {!!multimedia.length && (
        <MultimediaDisplayer
          multimedia={multimedia}
          onDeleteMultimedia={onDeleteMultimedia}
        />
      )}
      {!!files.length && (
        <FilesDisplayer files={files} onDeleteFile={onDeleteFile} />
      )}
      {hasMaxSizeError && (
        <Alert
          withClose
          description={t('post.max_size_error_description')}
          onClose={onClearSizeError}
          title={t('post.max_size_error_title', {
            maxSize: maxSizeString,
          })}
          variant="error"
        />
      )}
    </View>
  );
}
