"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.SSRImage = exports.SEOImage = exports.LazyLoadImage = exports.CSRImage = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _index = require("./index");
var _Container = require("./storybook/Container");
var _args = require("./storybook/args");
var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/image/dist/cjs/Image.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);
});
(0, _index.initCustomElement)({
  isExperimentOpen: experimentName => openExperiments.includes(experimentName)
});
var _default = exports.default = {
  title: 'Image',
  component: _index.Image,
  argTypes: _args.argTypes
};
const CSRImage = args => {
  const alt = 'Paints and Brush';
  const displayMode = 'fill';
  const containerId = 'container1';
  const {
    name,
    containerHeight,
    containerWidth,
    isSEOBot,
    isInFirstFold,
    placeholderTransition,
    shouldUseLQIP
  } = args;
  const key = `${isSEOBot}-${isInFirstFold}-${placeholderTransition}-${shouldUseLQIP}`;
  const imagePresets = {
    'Paints and Brush - 5000 * 2753': {
      uri: '11062b_9c53b59db1dc4bd4ad7a47340f0594b4~mv2.jpg',
      width: 5000,
      height: 2763
    },
    'Yellow Flower - 3333 * 5000': {
      uri: '11062b_a1495416958849dd8682868426dd876b~mv2.jpg',
      width: 3333,
      height: 5000
    },
    'Popsicles - 4912 * 7360': {
      uri: '11062b_bdbc8112d5bd4e3988b694612ca6cfd3~mv2.jpg',
      width: 4912,
      height: 7360
    },
    'Pattern - 300 * 300': {
      uri: 'e17121a8be8c470ea2e2175c8e27f2ca.png',
      width: 300,
      height: 300
    }
  };
  const {
    uri,
    width,
    height
  } = imagePresets[name] || {};
  return /*#__PURE__*/_react.default.createElement(_Container.Container, {
    id: containerId,
    width: containerWidth,
    height: containerHeight,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Image, (0, _extends2.default)({
    key: key,
    id: "image0",
    containerId: containerId,
    alt: alt,
    name: name,
    displayMode: displayMode,
    uri: uri,
    width: width,
    height: height
  }, args, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 7
    }
  })));
};
exports.CSRImage = CSRImage;
const SEOImage = () => {
  const uri = '11062b_9c53b59db1dc4bd4ad7a47340f0594b4~mv2.jpg';
  const alt = 'Paints and Brush';
  const name = 'Paints and Brush';
  const width = 5000;
  const height = 2763;
  const displayMode = 'fill';
  const containerId = 'container1';
  return /*#__PURE__*/_react.default.createElement("div", {
    id: containerId,
    style: {
      width: 900,
      height: 600
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 97,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Image, {
    id: "image1",
    containerId: containerId,
    uri: uri,
    alt: alt,
    name: name,
    width: width,
    height: height,
    displayMode: displayMode,
    isSEOBot: true,
    shouldUseLQIP: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 7
    }
  }));
};
exports.SEOImage = SEOImage;
const LazyLoadImage = () => {
  const uris = ['11062b_9c53b59db1dc4bd4ad7a47340f0594b4~mv2.jpg', '11062b_a1495416958849dd8682868426dd876b~mv2.jpg', '11062b_bdbc8112d5bd4e3988b694612ca6cfd3~mv2.jpg'];
  const containerId = 'lazyContainer';
  const sharedProps = {
    containerId,
    alt: '',
    width: 5000,
    height: 2763,
    displayMode: 'fill',
    shouldUseLQIP: true
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      height: '2000px',
      padding: '50px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_Container.Container, {
    width: 900,
    height: 600,
    id: "firstFold",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 133,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Image, (0, _extends2.default)({}, sharedProps, {
    id: "lazyImage",
    uri: uris[0] || '',
    height: 600,
    containerId: "firstFold",
    isInFirstFold: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 9
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      height: '1500px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 143,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("p", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 144,
      columnNumber: 9
    }
  }, "Scroll down to load the image...")), /*#__PURE__*/_react.default.createElement(_Container.Container, {
    id: containerId,
    width: 900,
    height: 600,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 146,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Image, (0, _extends2.default)({}, sharedProps, {
    id: "lazyImage2",
    uri: uris[1] || '',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 148,
      columnNumber: 11
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      height: '500px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 149,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_index.Image, (0, _extends2.default)({}, sharedProps, {
    id: "lazyImage3",
    uri: uris[2] || '',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 150,
      columnNumber: 11
    }
  })))));
};
exports.LazyLoadImage = LazyLoadImage;
const SSRImage = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      height: '2000px',
      padding: '50px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 159,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_Container.Container, {
    width: 900,
    height: 600,
    id: "firstFold",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 160,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Image, {
    alt: "",
    width: 5000,
    height: 2763,
    displayMode: "fill",
    shouldUseLQIP: true,
    getPlaceholder: data => {
      return {
        css: {
          img: {
            backgroundImage: `url(${data.placeholderImageUrl})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center center'
          }
        },
        transformed: true,
        attr: {
          img: {
            src: data.placeholderImageUrl,
            'data-src': data.src
          },
          container: {
            src: data.src
          }
        }
      };
    },
    id: "lazyImage",
    uri: "11062b_9c53b59db1dc4bd4ad7a47340f0594b4~mv2.jpg",
    containerId: "firstFold",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 161,
      columnNumber: 9
    }
  })));
};
exports.SSRImage = SSRImage;
//# sourceMappingURL=Image.stories.js.map