"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.imageKit = exports.Image = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _ImageModule = _interopRequireDefault(require("./Image.module.scss"));
var imageKit = _interopRequireWildcard(require("@wix/image-kit"));
exports.imageKit = imageKit;
var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/image/dist/cjs/Image.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const {
  STATIC_MEDIA_URL
} = imageKit;
const fetchLQIP = ({
  fittingType,
  src,
  target,
  options
}) => {
  const placeholder = imageKit.getPlaceholder(fittingType, src, target, {
    ...options,
    autoEncode: true
  });
  if (placeholder != null && placeholder.uri && !/^[a-z]+:/.test(placeholder.uri)) {
    placeholder.uri = `${STATIC_MEDIA_URL}${placeholder.uri}`;
  }
  return placeholder;
};
const SCHEME_RE = /^[a-z]+:/;
const Image = props => {
  var _ssrResult$css, _srcset$dpr;
  const {
    id,
    containerId,
    uri,
    alt,
    name = '',
    role,
    width,
    height,
    displayMode,
    devicePixelRatio,
    quality,
    alignType,
    bgEffectName = '',
    focalPoint,
    upscaleMethod,
    className = '',
    crop,
    imageStyles = {},
    targetWidth,
    targetHeight,
    targetScale,
    onLoad = () => {},
    onError = () => {},
    shouldUseLQIP,
    containerWidth,
    containerHeight,
    getPlaceholder,
    isInFirstFold,
    placeholderTransition,
    socialAttrs,
    isSEOBot,
    skipMeasure,
    hasAnimation,
    encoding,
    isFluidLayout
  } = props;
  const imageRef = React.useRef(null);
  // fix containerId and id to support hoverBox component
  let hasSsrSrc = '';
  const hasBlurTransition = placeholderTransition === 'blur';
  const ssrImageData = React.useRef(null);
  if (!ssrImageData.current) {
    if (getPlaceholder || shouldUseLQIP || isInFirstFold || isSEOBot) {
      const options = {
        upscaleMethod,
        ...(quality ? quality : {}),
        shouldLoadHQImage: isInFirstFold,
        isSEOBot,
        hasAnimation,
        encoding
      };
      ssrImageData.current = (getPlaceholder || fetchLQIP)({
        fittingType: displayMode,
        src: {
          id: uri,
          width,
          height,
          crop,
          name,
          focalPoint
        },
        target: {
          width: containerWidth,
          height: containerHeight,
          alignment: alignType,
          htmlTag: 'img'
        },
        options
      });
      hasSsrSrc = !ssrImageData.current.transformed || isInFirstFold || isSEOBot ? '' : 'true';
    } else {
      // to keep an empty placeholder data
      ssrImageData.current = {
        uri: undefined,
        // to remove src attribute completely
        css: {
          img: {}
        },
        attr: {
          img: {},
          container: {}
        },
        transformed: false
      };
    }
  }
  const isLQIP = !isSEOBot && (getPlaceholder || shouldUseLQIP) && !isInFirstFold && ssrImageData.current.transformed;
  const imageInfo = React.useMemo(() => JSON.stringify({
    containerId,
    ...(containerId && {
      containerId
    }),
    ...(alignType && {
      alignType
    }),
    ...(skipMeasure && {
      skipMeasure: true
    }),
    displayMode,
    ...(containerWidth && {
      targetWidth: containerWidth
    }),
    ...(containerHeight && {
      targetHeight: containerHeight
    }),
    ...(targetWidth && {
      targetWidth
    }),
    ...(targetHeight && {
      targetHeight
    }),
    ...(targetScale && {
      targetScale
    }),
    isLQIP,
    isSEOBot,
    lqipTransition: placeholderTransition,
    encoding,
    imageData: {
      width,
      height,
      uri,
      name,
      displayMode,
      hasAnimation,
      ...(quality && {
        quality
      }),
      ...(devicePixelRatio && {
        devicePixelRatio
      }),
      ...(focalPoint && {
        focalPoint
      }),
      ...(crop && {
        crop
      }),
      ...(upscaleMethod && {
        upscaleMethod
      })
    }
  }), [containerId, alignType, skipMeasure, displayMode, containerWidth, containerHeight, targetWidth, targetHeight, targetScale, isLQIP, isSEOBot, placeholderTransition, encoding, width, height, uri, name, hasAnimation, quality, devicePixelRatio, focalPoint, crop, upscaleMethod]);
  const ssrResult = ssrImageData.current;
  const src = ssrResult == null ? void 0 : ssrResult.uri;
  const srcset = ssrResult == null ? void 0 : ssrResult.srcset;
  const placeholderStyle = (_ssrResult$css = ssrResult.css) == null ? void 0 : _ssrResult$css.img;
  const classNames = `${_ImageModule.default.image} ${className}`;
  React.useEffect(() => {
    // When image comes from cache onLoad not trigger on native HTML element
    const imgElement = imageRef.current;
    if (onLoad && imgElement != null && imgElement.currentSrc && imgElement != null && imgElement.complete) {
      onLoad({
        target: imgElement
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const maxWidth = ssrResult && !(ssrResult != null && ssrResult.transformed) ? `max(${width}px, 100%)` : targetWidth ? `${targetWidth}px` : null;
  return /*#__PURE__*/React.createElement("wow-image", {
    id: id,
    class: classNames,
    "data-image-info": imageInfo
    // TODO: get the correct id to place here
    ,
    "data-motion-part": `BG_IMG ${containerId}`,
    "data-bg-effect-name": bgEffectName,
    "data-has-ssr-src": hasSsrSrc,
    "data-animate-blur": !isSEOBot && isLQIP && hasBlurTransition ? '' : undefined,
    "data-is-responsive": isFluidLayout ? 'true' : undefined,
    style: maxWidth ? {
      '--wix-img-max-width': maxWidth
    } : {},
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 209,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
    src: src,
    ref: imageRef,
    alt: alt || '',
    role: role,
    style: {
      ...placeholderStyle,
      ...imageStyles
    },
    onLoad: onLoad,
    onError: onError,
    width: containerWidth ? containerWidth : undefined,
    height: containerHeight ? containerHeight : undefined
  }, socialAttrs, {
    srcSet: isInFirstFold ? srcset == null || (_srcset$dpr = srcset.dpr) == null ? void 0 : _srcset$dpr.map(s => SCHEME_RE.test(s) ? s : `${STATIC_MEDIA_URL}${s}`).join(', ') : undefined
    // @ts-expect-error fetchpriority type should work in react > 18.3 https://github.com/facebook/react/pull/25927
    ,
    fetchpriority: isInFirstFold ? 'high' : undefined,
    loading: isInFirstFold === false ? 'lazy' : undefined
    // The src attribute triggers a mismatch warning because wow-image updates its src outside of the React lifecycle. This causes React to retain the old value in the virtual DOM, which could potentially lead to a bug where the old value is re-rendered during updates. However, we’re confident that this issue is not reproducing in current (16-18) React versions
    ,
    suppressHydrationWarning: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 223,
      columnNumber: 7
    }
  })));
};
exports.Image = Image;
//# sourceMappingURL=Image.js.map