"use strict";

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

exports.__esModule = true;
exports.Slide = 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 _lib = require("@sentecacommerce-theme/lib");

var _reactQuery = require("react-query");

var _Common = require("../../../Common");

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

var Slide = function Slide(_ref) {
  var _data$url;

  var data = _ref.data,
      _ref$small = _ref.small,
      small = _ref$small === void 0 ? false : _ref$small;

  var _ref2 = data || {},
      imageUrl = _ref2.imageUrl,
      header = _ref2.header,
      price = _ref2.price,
      subHeader = _ref2.subHeader;

  var queryCache = (0, _reactQuery.useQueryCache)();

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      commonMessages = _useGlobalLabels.commonMessages;

  var hasContent = !!(header || price || subHeader);

  var _useWindowDimensions = (0, _lib.useWindowDimensions)(),
      width = _useWindowDimensions.width;

  var textVariant = width < 1024 && small ? 6 : 5;
  return /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: (_data$url = data.url) != null ? _data$url : '#',
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(SlideContainer, {
    onMouseEnter: function onMouseEnter() {
      setTimeout(function () {
        var _data$url2;

        var url = (_data$url2 = data.url) == null ? void 0 : _data$url2.replaceAll(/\/p|\//gi, '');

        _lib.productsApi.usePrefetchProduct(queryCache, url);
      }, 2000);
    },
    className: "pl-md-4 slide"
  }, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
    backgroundOverImage: true,
    src: imageUrl,
    width: 1500,
    height: 2000
  }), hasContent && /*#__PURE__*/_react["default"].createElement(ProductInfoWrapper, null, /*#__PURE__*/_react["default"].createElement(Content, null, !!header && /*#__PURE__*/_react["default"].createElement(ProductHeader, {
    as: "h4",
    variant: textVariant
  }, header), !!subHeader && /*#__PURE__*/_react["default"].createElement(ProductSubHeader, {
    as: "h5",
    variant: textVariant,
    className: "mb-2"
  }, subHeader)), !!price && /*#__PURE__*/_react["default"].createElement(PriceWrapper, {
    as: "p",
    variant: textVariant
  }, commonMessages.bgn, " ", price))));
};

exports.Slide = Slide;

var SlideContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 0 0 auto;\n  position: relative;\n  width: 300px;\n  cursor: pointer;\n  padding-left: 1.6rem; // space between slides\n\n  flex-direction: column;\n  display: flex;\n\n  @media (min-width: ", ") {\n    width: calc((100vw - 144px) / 3);\n    max-width: 586px;\n  }\n\n  @media (min-width: ", ") {\n    width: 33%;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.xxl.min;
});

var ProductInfoWrapper = _styledComponents["default"].div.attrs({
  className: 'mx-2 px-1 pt-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  white-space: pre-line;\n  right: 0;\n  left: 0;\n  position: relative;\n\n  background-color: ", ";\n  color: ", ";\n  bottom: 0;\n\n  @media (min-width: ", ") {\n    display: flex;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.secondary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.md.min;
});

var ProductHeader = (0, _styledComponents["default"])(_Common.Typography)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  order: 1;\n  color: ", ";\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.primary;
});
var PriceWrapper = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'ml-md-auto pl-md-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  order: 2;\n  color: ", ";\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.primary;
});
var ProductSubHeader = (0, _styledComponents["default"])(_Common.Typography)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  order: 3;\n  color: ", ";\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.hint;
});

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