"use strict";

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

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

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

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

var _lib = require("@sentecacommerce-theme/lib");

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

var _templateObject;

var sizesMap = {
  1: '6',
  2: '12'
};
var desktopSizesMap = {
  1: '4',
  2: '8',
  3: '12'
};

var ListingBanner = function ListingBanner(_ref) {
  var expiry = _ref.expiry,
      mobileImage = _ref.mobileImage,
      desktopImage = _ref.desktopImage,
      alt = _ref.alt,
      link = _ref.link,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? {
    desktop: 1,
    mobile: 2
  } : _ref$size,
      fitImage = _ref.fitImage;

  var _useConfigState = (0, _lib.useConfigState)(),
      imagesConfig = _useConfigState.imagesConfig;

  var ratio = imagesConfig.ratio;
  var hasExpired = (expiry == null ? void 0 : expiry.validFrom) && (expiry == null ? void 0 : expiry.validTo) && (0, _lib.isExpired)(expiry == null ? void 0 : expiry.validFrom, expiry == null ? void 0 : expiry.validTo);
  var className = "col-" + sizesMap[size.mobile] + " col-lg-" + desktopSizesMap[size.desktop];
  var paddingBottomDesktop = ratio.height / ratio.width * 100 / size.desktop + "%";
  var paddingBottomMobile = ratio.height / ratio.width * 100 / size.mobile + "%";
  if (hasExpired) return null;
  return /*#__PURE__*/_react["default"].createElement("article", {
    className: className
  }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: link || '#',
    passHref: Boolean(link)
  }, /*#__PURE__*/_react["default"].createElement("a", {
    className: "d-block",
    onClick: function onClick(e) {
      return !link && e.preventDefault();
    }
  }, /*#__PURE__*/_react["default"].createElement(Container, {
    paddingBottomDesktop: paddingBottomDesktop,
    paddingBottomMobile: paddingBottomMobile,
    sizeMobile: size.mobile,
    sizeDesktop: size.desktop
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: mobileImage || desktopImage,
    className: "d-block d-lg-none",
    alt: alt,
    style: {
      objectFit: fitImage
    }
  }), /*#__PURE__*/_react["default"].createElement("img", {
    src: desktopImage || mobileImage,
    className: "d-none d-lg-block",
    alt: alt,
    style: {
      objectFit: fitImage
    }
  })))));
};

exports.ListingBanner = ListingBanner;

var Container = _styledComponents["default"].figure.attrs({
  className: 'd-block'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  padding-bottom: ", ";\n\n  @media (min-width: ", ") {\n    padding-bottom: ", ";\n  }\n\n  & img {\n    pointer-events: none;\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n"])), function (props) {
  return "calc(" + props.paddingBottomMobile + " - 6px * " + (props.sizeMobile - 1) + ")";
}, function (props) {
  return props.theme.breakpoints.lg.min;
}, function (props) {
  return "calc(" + props.paddingBottomDesktop + " - 10px * " + (props.sizeDesktop - 1) + ")";
});
//# sourceMappingURL=listingBanner.component.js.map