"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.LazyImage = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactIntersectionObserver = require("react-intersection-observer");

var _templateObject, _templateObject2, _templateObject3;

var transparentPixel = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==';

var LazyImage = function LazyImage(_ref) {
  var _ref$width = _ref.width,
      width = _ref$width === void 0 ? 300 : _ref$width,
      _ref$height = _ref.height,
      height = _ref$height === void 0 ? 400 : _ref$height,
      onClick = _ref.onClick,
      source = _ref.src,
      sourceLarge = _ref.srcLarge,
      background = _ref.background,
      alt = _ref.alt,
      backgroundOverImage = _ref.backgroundOverImage;

  var _useInView = (0, _reactIntersectionObserver.useInView)({
    triggerOnce: true
  }),
      ref = _useInView[0],
      inView = _useInView[1];

  var ratio = height && width ? height / width : 1;
  var src = process.browser ? source : transparentPixel;
  var srcLarge = process.browser ? sourceLarge || src : transparentPixel;

  var handleClick = function handleClick() {
    if (onClick && typeof onClick === 'function') {
      return onClick();
    }
  };

  return /*#__PURE__*/_react["default"].createElement(ImageWrapper, {
    ref: ref,
    ratio: ratio,
    background: background,
    onClick: handleClick,
    backgroundOverImage: backgroundOverImage
  }, /*#__PURE__*/_react["default"].createElement(CenterImage, null, inView && /*#__PURE__*/_react["default"].createElement(Image, {
    src: src,
    srcSet: srcLarge && src + " 1x, " + srcLarge + " 2x",
    alt: alt,
    width: width,
    loading: "lazy"
  })));
};

exports.LazyImage = LazyImage;

// TODO: review the background color after demo
var ImageWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  padding-bottom: ", "%;\n  width: 100%;\n  max-height: 100%;\n  cursor: pointer;\n\n  ", "\n"])), function (props) {
  return props.ratio * 100;
}, function (props) {
  return !props.backgroundOverImage ? "background-color: " + (props.background ? props.background : props.theme.palette.disabled) + ";" : "\n      &:after {\n        content: '';\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        top: 0;\n        left: 0;\n        background-color: " + (props.background ? props.background : props.theme.palette.primary) + ";\n        opacity: 0.072;\n        pointer-events: none;\n      }\n  ";
});

var Image = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n"])));

var CenterImage = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
//# sourceMappingURL=index.js.map