/* ImageIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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';
var styles = {
  roundedImage: "_2rko1rr0"
};
export var ImageIcon = function ImageIcon(_ref) {
  var _ref$alt = _ref.alt,
    alt = _ref$alt === void 0 ? '' : _ref$alt,
    src = _ref.src,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 16 : _ref$size,
    title = _ref.title,
    defaultIcon = _ref.default,
    _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
    hideLoadingSkeleton = _ref.hideLoadingSkeleton;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hasImageErrored = _useState2[0],
    setHasImageErrored = _useState2[1];

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

  // TODO: do we need this?
  if (!src) {
    return defaultIcon || null;
  }
  if (hasImageErrored) {
    return defaultIcon;
  }
  var 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
    });
  }
};