/* ImageIcon.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./ImageIcon.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useState } from 'react';
import ImageLoader from 'react-render-image';
import { Image } from './styled';
const styles = {
  roundedImage: "_2rko1rr0"
};
export const ImageIcon = ({
  alt = '',
  src,
  size = 16,
  title,
  default: defaultIcon,
  appearance = 'square',
  hideLoadingSkeleton
}) => {
  const [hasImageErrored, setHasImageErrored] = useState(false);

  // If url changes, reset state
  useEffect(() => {
    setHasImageErrored(false);
  }, [src]);
  const handleError = useCallback(() => {
    setHasImageErrored(true);
  }, []);

  // TODO: do we need this?
  if (!src) {
    return defaultIcon || null;
  }
  if (hasImageErrored) {
    return defaultIcon;
  }
  const LoadedImageComponent = /*#__PURE__*/React.createElement(Image
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
  , _extends({
    className: ax([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
    src: src,
    alt: alt,
    size: size,
    title: title
  }, hideLoadingSkeleton ? {
    onError: handleError
  } : undefined));
  if (hideLoadingSkeleton) {
    return LoadedImageComponent;
  } else {
    return /*#__PURE__*/React.createElement(ImageLoader, {
      src: src,
      loading: defaultIcon,
      loaded: LoadedImageComponent,
      errored: defaultIcon
    });
  }
};