"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.ImageNG = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("./custom-element/utils");
var _args = require("./storybook/args");
var _index = require("./index");
var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/image/dist/cjs/ImageNG.stories.tsx";
// add here default open experiments
const openExperiments = [];
const urlParams = new URLSearchParams(window.location.search);
const experimentsParam = urlParams.get('experiments');
((experimentsParam == null ? void 0 : experimentsParam.split(',')) || []).forEach(experiment => {
  openExperiments.push(experiment);
});
var _default = exports.default = {
  title: 'Image',
  component: _index.ImageNG,
  argTypes: _args.argTypesNG
};
const ImageNG = args => {
  const {
    id,
    alt,
    priority,
    decorative,
    role,
    image,
    breakpoints,
    crop,
    objectFit,
    focalPoint,
    quality,
    resolutions
  } = args;
  const sources = breakpoints.toSorted((a, b) => a - b).concat('default').map((bp, index) => {
    const cropIndex = bp === 'default' ? 0 : Math.min(index + 1, crop.length - 1);
    return {
      image: {
        ...(_args.CONTENT_OPTIONS[image] || {}),
        ...(crop.length && {
          crop: crop[cropIndex]
        }),
        quality
        // TODO(ameerabuf) - unsharpMask?
      },
      ...(bp !== 'default' ? {
        media: {
          maxWidth: bp
        }
      } : {}),
      sizes: [{
        size: {
          value: 60,
          type: 'vw'
        }
      }],
      targetSizes: resolutions
    };
  });
  const props = {
    id,
    alt,
    priority,
    decorative,
    role,
    sources
  };
  return (
    /*#__PURE__*/
    // TODO(ameerabuf) - allow layout change in storybook? it can demonstrate 'sizes' attribute behavior
    _react.default.createElement("div", {
      style: {
        margin: 'auto',
        width: '60vw',
        height: '500px',
        background: '#ff0000aa'
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 67,
        columnNumber: 5
      }
    }, /*#__PURE__*/_react.default.createElement("style", {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 7
      }
    }, [...sources].reverse().map(({
      media
    }, index) => {
      const objectFitIndex = Math.min(index, objectFit.length - 1);
      const focalPointIndex = Math.min(index, focalPoint.length - 1);
      return `${media ? `@media ${(0, _utils.getMediaSizeQueryString)(media)} {` : ''}#${id}{--object-fit: ${objectFit[objectFitIndex] || 'cover'}; --focal-x: ${focalPoint[focalPointIndex].x ?? 50};  --focal-y: ${focalPoint[focalPointIndex].y ?? 50};}${media ? '}' : ''}`;
    }).join(' ')), /*#__PURE__*/_react.default.createElement(_index.ImageNG, (0, _extends2.default)({}, props, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 91,
        columnNumber: 7
      }
    })))
  );
};
exports.ImageNG = ImageNG;
//# sourceMappingURL=ImageNG.stories.js.map