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

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

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { useWindowDimensions, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { productsApi } from '@sentecacommerce-theme/lib';
import { useQueryCache } from 'react-query';
import { Typography, LazyImage } from '../../../Common';
export var Slide = (_ref) => {
  var _data$url;

  var {
    data,
    small = false
  } = _ref;
  var {
    imageUrl,
    header,
    price,
    subHeader
  } = data || {};
  var queryCache = useQueryCache();
  var {
    commonMessages
  } = useGlobalLabels();
  var hasContent = !!(header || price || subHeader);
  var {
    width
  } = useWindowDimensions();
  var textVariant = width < 1024 && small ? 6 : 5;
  return /*#__PURE__*/React.createElement(Link, {
    href: (_data$url = data.url) != null ? _data$url : '#',
    prefetch: false
  }, /*#__PURE__*/React.createElement(SlideContainer, {
    onMouseEnter: () => {
      setTimeout(function () {
        var _data$url2;

        var url = (_data$url2 = data.url) == null ? void 0 : _data$url2.replaceAll(/\/p|\//gi, '');
        productsApi.usePrefetchProduct(queryCache, url);
      }, 2000);
    },
    className: "pl-md-4 slide"
  }, /*#__PURE__*/React.createElement(LazyImage, {
    backgroundOverImage: true,
    src: imageUrl,
    width: 1500,
    height: 2000
  }), hasContent && /*#__PURE__*/React.createElement(ProductInfoWrapper, null, /*#__PURE__*/React.createElement(Content, null, !!header && /*#__PURE__*/React.createElement(ProductHeader, {
    as: "h4",
    variant: textVariant
  }, header), !!subHeader && /*#__PURE__*/React.createElement(ProductSubHeader, {
    as: "h5",
    variant: textVariant,
    className: "mb-2"
  }, subHeader)), !!price && /*#__PURE__*/React.createElement(PriceWrapper, {
    as: "p",
    variant: textVariant
  }, commonMessages.bgn, " ", price))));
};
var SlideContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.xxl.min;
});
var ProductInfoWrapper = styled.div.attrs({
  className: 'mx-2 px-1 pt-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.secondary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.min;
});
var ProductHeader = styled(Typography)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  order: 1;\n  color: ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
});
var PriceWrapper = styled(Typography).attrs({
  className: 'ml-md-auto pl-md-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  order: 2;\n  color: ", ";\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.primary;
});
var ProductSubHeader = styled(Typography)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  order: 3;\n  color: ", ";\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.hint;
});
var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map