import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React from 'react';
import styled from 'styled-components';
import { Button as CommonButton } from '../../../Common';
import { useBanner, Link } from '@sentecacommerce-theme/lib';
export var Banner = props => {
  var {
    images,
    html
  } = props;
  var banner = useBanner(images);
  var {
    imageDesktop,
    title,
    description,
    imageDesktopWidth,
    imageDesktopHeight,
    image,
    imageHeight,
    imageWidth,
    button,
    pushFromLeftDesktop,
    pushFromTopDesktop,
    imageUrl
  } = banner || {};
  if (!banner) return null;
  var hasMobileImage = Boolean(image);
  var desktopClass = hasMobileImage ? 'd-none d-lg-block' : 'd-block';
  return /*#__PURE__*/React.createElement(Container, {
    key: "Banner-Image--" + imageUrl
  }, /*#__PURE__*/React.createElement("div", {
    className: desktopClass
  }, /*#__PURE__*/React.createElement(Link, {
    href: imageUrl != null ? imageUrl : ''
  }, /*#__PURE__*/React.createElement(Image, {
    width: imageDesktopWidth,
    height: imageDesktopHeight,
    src: imageDesktop != null ? imageDesktop : image,
    alt: title || 'Банер' // TODO: fallback

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

  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  max-width: 100%;\n  min-width: 100%;\n"])));
var Image = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 100%;\n"])));
var ContentBlock = styled.div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.lg.min;
}, (_ref2) => {
  var {
    pushFromTopDesktop
  } = _ref2;
  return pushFromTopDesktop || '50%';
}, (_ref3) => {
  var {
    pushFromLeftDesktop
  } = _ref3;
  return pushFromLeftDesktop || '8.8rem';
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.max;
});
var Title = styled.h2.attrs({
  className: 'mb-2 mt-5 '
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.lg.min;
});
var Description = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.light;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.breakpoints.lg.min;
});
var ButtonContainer = styled.div.attrs({
  className: 'd-inline-block mr-auto align-self-end mb-3'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    transform: translateY(-100%);\n  }\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.breakpoints.lg.min;
});
var Button = styled(CommonButton).attrs({
  className: 'd-flex justify-content-center align-items-center px-3 '
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  font-size: 1.3rem !important;\n\n  @media (min-width: ", ") {\n    font-size: 1.5rem !important;\n  }\n"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=banner.component.js.map