import React from 'react';
import {map, getOr} from 'lodash/fp';
import {useSelector} from 'react-redux';
import {plainToClass} from 'class-transformer';
import ThreadContent from '../../../../../models/ThreadContent';
import ThreadAttachment, {getAttachmentFileTypeCssClass} from '../../../../../models/ThreadAttachment';
import {downloadAttachmentRoute} from '../../../../../api-routes';
import {getCurrentThreadId} from '../../../../selectors/thread';

interface Props {
  attachments: ThreadContent[];
}

const FileAttachments = ({attachments}: Props) => {
  if (!attachments.length) {
    return null;
  }
  const threadId = useSelector(getCurrentThreadId);
  return (
    <ul className='attachments inline-list'>
      {map(({id, contentInstance}) => {
          const obj = plainToClass(ThreadAttachment, contentInstance);
          const caption = getOr('', 'media.caption', obj);
          return (
            <li key={`file_attachment_${id}`} className={getAttachmentFileTypeCssClass(obj)}>
              <a href={downloadAttachmentRoute(threadId, obj.id)} target='_blank' className='btn-dl' >
                <i className='fa fa-download'/>
              </a>
              <span className='filename' data-tooltip title={caption}>
                {caption}
              </span>
          </li>);
        },
      attachments)}
    </ul>
  );
};
export default FileAttachments;