"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 _Common = require("../../../Common");

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

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

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

  var _ref = banner || {},
      imageDesktop = _ref.imageDesktop,
      title = _ref.title,
      description = _ref.description,
      imageDesktopWidth = _ref.imageDesktopWidth,
      imageDesktopHeight = _ref.imageDesktopHeight,
      image = _ref.image,
      imageHeight = _ref.imageHeight,
      imageWidth = _ref.imageWidth,
      button = _ref.button,
      pushFromLeftDesktop = _ref.pushFromLeftDesktop,
      pushFromTopDesktop = _ref.pushFromTopDesktop,
      imageUrl = _ref.imageUrl;

  if (!banner) return null;
  var hasMobileImage = Boolean(image);
  var desktopClass = hasMobileImage ? 'd-none d-lg-block' : 'd-block';
  return /*#__PURE__*/_react["default"].createElement(Container, {
    key: "Banner-Image--" + imageUrl
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: desktopClass
  }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: imageUrl != null ? imageUrl : ''
  }, /*#__PURE__*/_react["default"].createElement(Image, {
    width: imageDesktopWidth,
    height: imageDesktopHeight,
    src: imageDesktop != null ? imageDesktop : image,
    alt: title || 'Банер' // TODO: fallback

  }))), hasMobileImage && /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-block d-lg-none"
  }, /*#__PURE__*/_react["default"].createElement(Image, {
    width: imageWidth,
    height: imageHeight,
    src: image != null ? image : imageDesktop,
    alt: title || 'Банер' // TODO: fallback

  })));
};

exports.Banner = Banner;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  max-width: 100%;\n  min-width: 100%;\n"])));

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

var ContentBlock = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  text-align: left;\n  height: 100%;\n\n  @media (min-width: ", ") {\n    width: 62rem;\n    top: ", ";\n    left: ", ";\n    transform: translateY(-50%);\n    text-align: left;\n    bottom: auto;\n  }\n  @media (max-width: ", ") {\n    transform: translate(0);\n    top: 0;\n    left: 2rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
}, function (_ref3) {
  var pushFromTopDesktop = _ref3.pushFromTopDesktop;
  return pushFromTopDesktop || '50%';
}, function (_ref4) {
  var pushFromLeftDesktop = _ref4.pushFromLeftDesktop;
  return pushFromLeftDesktop || '8.8rem';
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.max;
});

var Title = _styledComponents["default"].h2.attrs({
  className: 'mb-2 mt-5 '
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 2.2rem;\n  line-height: 1.2;\n  flex-basis: 80%;\n\n  width: 100%;\n  color: ", ";\n\n  @media (min-width: ", ") {\n    font-size: 4.8rem;\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.light;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});

var Description = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 24px;\n\n  line-height: 1.33;\n  color: currentColor;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 2rem;\n\n  @media (min-width: ", ") {\n    font-size: 1.8rem;\n  }\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.light;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.lg.min;
});

var ButtonContainer = _styledComponents["default"].div.attrs({
  className: 'd-inline-block mr-auto align-self-end mb-3'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    transform: translateY(-100%);\n  }\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.breakpoints.lg.min;
});

var Button = (0, _styledComponents["default"])(_Common.Button).attrs({
  className: 'd-flex justify-content-center align-items-center px-3 '
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: bold;\n  font-size: 1.3rem !important;\n\n  @media (min-width: ", ") {\n    font-size: 1.5rem !important;\n  }\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=banner.component.js.map