"use strict";

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

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

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

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

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

var _link = _interopRequireDefault(require("next/link"));

var _Button = require("../Common/Button");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var Banner = function Banner(props) {
  var images = props.images;
  var banner = (0, _lib.useBanner)(images);

  var _ref = banner || {},
      image = _ref.image,
      imageDesktop = _ref.imageDesktop,
      buttonTitle = _ref.buttonTitle,
      inverted = _ref.inverted,
      buttonCaption = _ref.buttonCaption,
      bannerUrl = _ref.bannerUrl,
      title = _ref.title,
      height = _ref.height;

  if (!banner) return null;
  var hasMobileImage = Boolean(image);
  return /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: bannerUrl != null ? bannerUrl : '',
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(Container, {
    height: +(height || 700),
    className: "pb-3"
  }, /*#__PURE__*/_react["default"].createElement(Image, {
    src: imageDesktop || image,
    className: hasMobileImage ? 'd-none d-lg-block' : 'd-block'
  }), hasMobileImage && /*#__PURE__*/_react["default"].createElement(Image, {
    src: image || imageDesktop,
    className: "d-block d-lg-none"
  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, title && /*#__PURE__*/_react["default"].createElement(Title, {
    inverted: inverted,
    dangerouslySetInnerHTML: {
      __html: title
    }
  }), buttonTitle && /*#__PURE__*/_react["default"].createElement(ButtonCaption, {
    inverted: inverted
  }, buttonTitle), buttonCaption && /*#__PURE__*/_react["default"].createElement(ButtonWrapper, {
    className: "mt-3"
  }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: bannerUrl != null ? bannerUrl : '',
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement("button", {
    className: "p-0"
  }, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    as: "span",
    variant: inverted ? 'primary' : 'secondary',
    label: buttonCaption
  })))))));
};

exports.Banner = Banner;

var Container = _styledComponents["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  height: ", "rem;\n  width: auto;\n  pointer-events: auto;\n  text-transform: none;\n  display: block;\n  overflow: hidden;\n\n  @media (max-width: ", ") {\n    height: 50rem;\n  }\n"])), function (props) {
  return (props.height || 700) / 10;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Title = _styledComponents["default"].h2(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 900;\n  font-size: 4.8rem;\n  text-transform: uppercase;\n  letter-spacing: -0.15rem;\n  line-height: 0.833333;\n  color: ", ";\n\n  @media (min-width: ", ") {\n    font-size: 7.2rem;\n  }\n"])), function (props) {
  return props.inverted ? props.theme.palette.secondary : props.theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var Image = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: 1;\n  object-position: 50% 50%;\n  font-family: 'object-fit:cover;object-position:50% 50%';\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  max-width: 100%;\n  display: block;\n"])));

var ButtonContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex mb-4 pb-3 ml-4 pl-3'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  bottom: 1.6rem;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 1.6rem);\n  flex-direction: column;\n  justify-content: flex-end;\n"])));

var ButtonCaption = _styledComponents["default"].h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (props) {
  return props.inverted ? props.theme.palette.secondary : props.theme.palette.primary;
});

var ButtonWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=banner.component.js.map