"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ImageNG = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _imageKit = require("@wix/image-kit");
var _utils = require("./custom-element/utils");
var _utils2 = require("./utils");
var _imageNGModule = _interopRequireDefault(require("./imageNG.module.scss"));
var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/image/dist/cjs/ImageNG.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); }
// TODO(ameerabuf) - in original comp these prefixes could be overriden by EnvConsts
const STATIC_MEDIA_URL = 'https://static.wixstatic.com/media/';
const MEDIA_ROOT_URL = 'https://static.wixstatic.com/';
function getURL(image, targetSize) {
  if (!image.height || !image.width) {
    return '';
  }
  let inverseAspectRatio = image.height / image.width;
  // TODO(ameerabuf) - are those the same? seemed to be used as the same in other places..
  const pixelAspectRatio = 1;
  const devicePixelRatio = 1;
  const src = Object.fromEntries(['width', 'height', 'name'].filter(key => image[key]).map(key => [key, image[key]]));
  if (image.crop) {
    const cropX = image.crop.x || 0;
    const cropY = image.crop.y || 0;
    const cropW = Math.min(image.crop.width || image.width, image.width - cropX);
    const cropH = Math.min(image.crop.height || image.height, image.height - cropY);
    inverseAspectRatio = cropH / cropW;
    src.crop = {
      x: cropX,
      y: cropY,
      width: cropW,
      height: cropH
    };
  }
  src.id = image.uri;
  const target = {
    width: targetSize,
    height: targetSize * inverseAspectRatio,
    pixelAspectRatio,
    alignment: 'center',
    htmlTag: 'img'
  };
  const options = {
    // TODO(ameerabuf) - implement filter and upscale?
    // filters?: ImageTransformFiltersOption;
    // upscaleMethod?: UpscaleMethod;
    quality: image.quality,
    hasAnimation: !!image.animated,
    devicePixelRatio
  };
  const {
    uri
  } = (0, _imageKit.getData)('fill', src, target, options);
  return uri && (0, _utils.getMediaUrlByContext)(uri, STATIC_MEDIA_URL, MEDIA_ROOT_URL);
}
const ImageNG = props => {
  const {
    id,
    alt,
    sources,
    priority,
    decorative,
    role,
    dataset
  } = props;
  if (!sources.length) {
    return null;
  }
  const sourcesAttributes = sources.map(({
    image,
    media,
    sizes,
    targetSizes
  }) => {
    var _image$crop, _image$crop2, _image$crop3, _image$crop4;
    return {
      sizes: sizes.map(s => `${s.media ? (0, _utils.getMediaSizeQueryString)(s.media) + ' ' : ''}${s.size.value}${s.size.type}`).join(', '),
      srcset: targetSizes.map(s => `${getURL(image, s)} ${s}w`).join(', '),
      ...(media && {
        media: (0, _utils.getMediaSizeQueryString)(media)
      }),
      width: Math.min(((_image$crop = image.crop) == null ? void 0 : _image$crop.width) || image.width, image.width - (((_image$crop2 = image.crop) == null ? void 0 : _image$crop2.x) || 0)),
      height: Math.min(((_image$crop3 = image.crop) == null ? void 0 : _image$crop3.height) || image.height, image.height - (((_image$crop4 = image.crop) == null ? void 0 : _image$crop4.y) || 0))
    };
  });
  const defaultSource = sources[sources.length - 1];
  const {
    image
  } = defaultSource;
  const fullSizeSrc = getURL(image, image.width);
  const dataAttrs = dataset ? Object.fromEntries(Object.entries(dataset).map(([key, val]) => [`data-${(0, _utils2.camelToKebab)(key)}`, val])) : {};
  return /*#__PURE__*/React.createElement("picture", (0, _extends2.default)({
    id: id,
    className: `${_imageNGModule.default.image}`
  }, dataAttrs, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 124,
      columnNumber: 5
    }
  }), sourcesAttributes.map(({
    sizes,
    srcset,
    media,
    width,
    height
  }) => /*#__PURE__*/React.createElement("source", {
    key: `${id}-${media}`,
    sizes: sizes,
    srcSet: srcset,
    media: media,
    width: width,
    height: height,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 126,
      columnNumber: 9
    }
  })), /*#__PURE__*/React.createElement("style", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 135,
      columnNumber: 7
    }
  }, [...sourcesAttributes].reverse().map(({
    media,
    width,
    height
  }) => `${media ? `@media ${media} {` : ''}#${id}{--aspect-ratio: ${width / height};}${media ? '}' : ''}`).join(' ')), /*#__PURE__*/React.createElement("img", (0, _extends2.default)({}, priority === 'high' ? {
    fetchpriority: 'high'
  } : {
    loading: 'lazy'
  }, decorative && {
    'aria-hidden': true
  }, {
    src: fullSizeSrc,
    alt: decorative ? '' : alt,
    role: role,
    width: image.width,
    height: image.height,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 154,
      columnNumber: 7
    }
  })));
};
exports.ImageNG = ImageNG;
//# sourceMappingURL=ImageNG.js.map