"use strict";

exports.__esModule = true;
exports.fetchAndLoadAnimation = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lottieWeb = _interopRequireDefault(require("lottie-web"));
var _includes = _interopRequireDefault(require("lodash/fp/includes"));
var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
var _keys = _interopRequireDefault(require("lodash/fp/keys"));
var _omit = _interopRequireDefault(require("lodash/fp/omit"));
var _isomorphicUnfetch = _interopRequireDefault(require("isomorphic-unfetch"));
var _style = _interopRequireDefault(require("./style.css"));
var _propTypes = _interopRequireWildcard(require("./prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const fetchAndLoadAnimation = async (_lottie, _fetch, animationSrc, containerRef, loop, animationClassnames, hideOnTransparent, autoplay) => {
  const animationUrl = new URL(animationSrc).toString();
  const fetchResult = await _fetch(animationUrl, {
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json'
    }
  });
  const animationData = await fetchResult.json();
  const animation = _lottie.loadAnimation && _lottie.loadAnimation({
    container: containerRef.current,
    // the dom element that will contain the animation
    renderer: 'svg',
    autoplay,
    loop,
    animationData,
    rendererSettings: {
      className: animationClassnames,
      hideOnTransparent,
      preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop
    }
  });
  return animation;
};
exports.fetchAndLoadAnimation = fetchAndLoadAnimation;
const LottieWrapper = props => {
  const {
    className,
    'data-name': dataName,
    'aria-label': ariaLabel,
    animationSrc,
    loop = false,
    rendererSettings = {},
    width,
    height,
    autoplay = true,
    animationControl
  } = props;
  const {
    className: animationClassName,
    hideOnTransparent = true
  } = rendererSettings;
  const containerRef = (0, _react.useRef)(null);
  const isCancelledRef = (0, _react.useRef)(null);

  // lottie's animation instance
  const [animationItem, setAnimationItem] = (0, _react.useState)(null);
  const [isAnimationVisible, setIsAnimationVisible] = (0, _react.useState)(autoplay);
  const wrapperClassName = (0, _react.useMemo)(() => (0, _classnames.default)(className, _style.default.lottieContainer), [className]);
  const lottieAnimationClassName = (0, _react.useMemo)(() => (0, _classnames.default)(animationClassName, _style.default.animation), [animationClassName]);
  (0, _react.useEffect)(() => {
    if ((0, _includes.default)(animationControl, (0, _keys.default)((0, _omit.default)('loading', _propTypes.ANIMATION_CONTROL))) && !autoplay) {
      setIsAnimationVisible(true);
      /* istanbul ignore next */
      if (animationItem) animationItem[animationControl]();
      if (animationControl === _propTypes.ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
    }
  }, [animationControl, animationItem, autoplay]);
  (0, _react.useEffect)(() => {
    const loadAnimation = async () => {
      /* istanbul ignore else */
      if (!animationItem && typeof window !== 'undefined') {
        window.lottie = _lottieWeb.default;
        const animation = await fetchAndLoadAnimation(window.lottie, _isomorphicUnfetch.default, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
        (0, _isNil.default)(isCancelledRef.current) && setAnimationItem(animation);
      }
    };
    loadAnimation();
    return () => {
      isCancelledRef.current = true;
      return animationItem && /* istanbul ignore next */window.lottie.destroy(animationItem.name);
    };
  }, [lottieAnimationClassName, containerRef, hideOnTransparent, loop, animationSrc, animationItem, autoplay]);
  const accessibilityProps = ariaLabel ? {
    'aria-label': ariaLabel,
    role: 'img'
  } : {
    'aria-hidden': 'true',
    role: 'presentation'
  };
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, accessibilityProps, {
    ref: containerRef,
    "data-name": dataName,
    className: wrapperClassName,
    style: {
      ...(width && {
        width: `${width}px`,
        maxWidth: `${width}px`
      }),
      ...(height && {
        height: `${height}px`,
        maxHeight: `${height}px`
      }),
      opacity: isAnimationVisible ? 1 : 0,
      transition: 'opacity 0.25s ease-in'
    }
  }));
};
LottieWrapper.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
var _default = exports.default = LottieWrapper;
//# sourceMappingURL=index.js.map