import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import { jsx, Fragment } from 'react/jsx-runtime';

var _excluded$1 = ["className"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ImagePlaceholder = function ImagePlaceholder(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    props = _objectWithoutProperties(_ref, _excluded$1);
  return /*#__PURE__*/jsx("div", _objectSpread$1({
    "data-testid": "fallback-image",
    className: classnames("neeto-ui-bg-gray-100", _defineProperty({}, className, className))
  }, props));
};

var _excluded = ["src", "fallback"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ImageWithFallback = function ImageWithFallback(_ref) {
  var src = _ref.src,
    fallback = _ref.fallback,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isLoaded = _useState2[0],
    setIsLoaded = _useState2[1];
  useEffect(function () {
    var img = new Image();
    img.onload = function () {
      setIsLoaded(true);
    };
    img.src = src;
  }, [src]);
  return isLoaded ? /*#__PURE__*/jsx("img", _objectSpread({
    "data-testid": "original-image"
  }, _objectSpread({
    src: src
  }, otherProps))) : /*#__PURE__*/jsx(Fragment, {
    children: fallback || /*#__PURE__*/jsx(ImagePlaceholder, _objectSpread({}, otherProps))
  });
};

export { ImageWithFallback as default };
//# sourceMappingURL=ImageWithFallback.js.map
