import React from 'react';
import { STXImage } from '../types';
import PhotoPreview from './PhotoPreview';
import { DEFAULT_FALLBACK_URL, PDF_FALLBACK_URL } from './types';

const PhotoUploadImage = ({
  image,
  enableDelete,
  onDeleteImage,
  onClick,
  allowView = false,
}: {
  image: STXImage;
  enableDelete: boolean;
  onDeleteImage: any;
  onClick: any;
  allowView: boolean;
}) => {
  const { title, type, thumbnailUrl } = image;
  const isPdf = type.indexOf('pdf') > -1;

  var src = DEFAULT_FALLBACK_URL;
  if (isPdf) {
    src = PDF_FALLBACK_URL;
  } else if (allowView) {
    src = thumbnailUrl;
  }

  return (
    <PhotoPreview
      src={src}
      alt={title}
      enableDelete={enableDelete}
      onDeleteImage={onDeleteImage}
      onClick={onClick}
      allowView={allowView}
      queueItem={false}
    />
  );
};

export default PhotoUploadImage;