content: import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  
  import Button from '@ciscospark/react-component-button';
  import {ICON_TYPE_DOWNLOAD} from '@ciscospark/react-component-icon';
  import Spinner from '@ciscospark/react-component-spinner';
  import {bytesToSize} from '@ciscospark/react-component-utils';
  
  import styles from './styles.css';
  
  function ActivityShareThumbnail(props) {
    const {
      file,
      isFetching,
      isPending,
      objectUrl,
      onDownloadClick
    } = props;
    const {
      displayName,
      fileSize,
      objectType
    } = file;
  
    let image;
  
    if (!isFetching && objectUrl) {
      image = <img alt="Uploaded File" src={objectUrl} />;
    }
    else if (isFetching) {
      image = <div className={classNames(`ciscospark-spinner-container`, styles.spinnerContainer)}><Spinner /></div>;
    }
  
    function handleDownloadClick() {
      onDownloadClick(file);
    }
  
    let shareItemActions;
    if (!isPending) {
      // eslint-disable-next-line no-extra-parens
      shareItemActions = (
        <div className={classNames(`ciscospark-share-item-actions`, styles.shareActions)}>
          <div className={classNames(`ciscospark-share-action-item`, styles.shareActionItem)}>
            <Button
              buttonClassName={styles.downloadButton}
              iconType={ICON_TYPE_DOWNLOAD}
              onClick={handleDownloadClick}
              title="Download this file"
            />
          </div>
        </div>
      );
    }
  
    return (
      <div className={classNames(`ciscospark-activity-share-item`, styles.shareItem)}>
        <div className={classNames(`ciscospark-share-thumbnail`, styles.thumbnail)}>
          {image}
        </div>
        <div className={classNames(`ciscospark-share-meta`, styles.meta)}>
          <div className={classNames(`ciscospark-share-file-info`, styles.fileInfo)}>
            <div className={classNames(`ciscospark-share-name`, styles.name)}>{displayName}</div>
            <div className={classNames(`ciscospark-share-file-props`, styles.fileProps)}>
              <span className={classNames(`ciscospark-share-file-size`, styles.fileSize)}>{bytesToSize(fileSize)}</span>
              <span className={classNames(`ciscospark-share-file-type`, styles.fileType)}>{objectType}</span>
            </div>
          </div>
          {shareItemActions}
        </div>
      </div>
    );
  }
  
  ActivityShareThumbnail.propTypes = {
    file: PropTypes.object,
    isFetching: PropTypes.bool,
    isPending: PropTypes.bool,
    objectUrl: PropTypes.string,
    onDownloadClick: PropTypes.func
  };
  
  export default ActivityShareThumbnail;
  