/** @jsx jsx */
import { Fragment, useMemo } from 'react';
import { jsx } from '@emotion/react';
import { getRandomHex } from '@atlaskit/media-common';
import { useFilePreview } from '@atlaskit/media-file-preview';
import { MediaImage } from '@atlaskit/media-ui';
import { InlineImageCardLoadingView } from './views/loading-view';
export var InlineImageCard = function InlineImageCard(_ref) {
  var dimensions = _ref.dimensions,
    identifier = _ref.identifier,
    renderError = _ref.renderError,
    alt = _ref.alt,
    isLazy = _ref.isLazy,
    ssr = _ref.ssr,
    crop = _ref.crop,
    stretch = _ref.stretch;
  // Generate unique traceId for file
  var traceContext = useMemo(function () {
    return {
      traceId: getRandomHex(8)
    };
  }, []);

  // TODO do we need to handle nonCriticalError
  var _useFilePreview = useFilePreview({
      identifier: identifier,
      ssr: ssr,
      dimensions: dimensions,
      traceContext: traceContext
    }),
    preview = _useFilePreview.preview,
    previewError = _useFilePreview.error,
    onImageError = _useFilePreview.onImageError,
    _onImageLoad = _useFilePreview.onImageLoad,
    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
  if (previewError) {
    return renderError({
      error: previewError
    });
  }
  if (!preview) {
    return jsx(InlineImageCardLoadingView, null);
  }
  return jsx(Fragment, null, jsx(MediaImage, {
    dataURI: preview.dataURI,
    alt: alt,
    previewOrientation: preview.orientation,
    onImageLoad: function onImageLoad() {
      _onImageLoad(preview);
    },
    onImageError: onImageError,
    loading: isLazy ? 'lazy' : undefined,
    forceSyncDisplay: !!ssr,
    crop: crop,
    stretch: stretch
  }), getSsrScriptProps && jsx("script", getSsrScriptProps()));
};