"use strict";

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

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

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

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

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

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

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

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

var ProductPlaceholder = function ProductPlaceholder() {
  var _useConfigState = (0, _lib.useConfigState)(),
      imagesConfig = _useConfigState.imagesConfig;

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Div, {
    className: "container-fluid",
    mobile: true
  }, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "45%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "50%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "35%",
    className: "mb-4"
  })), /*#__PURE__*/_react["default"].createElement(Div, {
    mobile: true
  }, /*#__PURE__*/_react["default"].createElement(ImageFlex, {
    className: "g-1 mb-4"
  }, /*#__PURE__*/_react["default"].createElement(ImageContainer, {
    className: "col-8",
    imagesConfig: imagesConfig
  }, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    image: true,
    absolute: true
  })), /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      minWidth: 16
    }
  }), /*#__PURE__*/_react["default"].createElement(ImageContainer, {
    className: "col-4",
    imagesConfig: imagesConfig
  }, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    image: true,
    absolute: true
  })))), /*#__PURE__*/_react["default"].createElement(Flex, {
    className: "container-fluid"
  }, /*#__PURE__*/_react["default"].createElement(ImageFlex, {
    className: "g-1",
    desktop: true
  }, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    image: true,
    halfOnDesktop: true
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    image: true,
    halfOnDesktop: true
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    image: true,
    halfOnDesktop: true
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    image: true,
    halfOnDesktop: true
  })), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "55%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "85%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "35%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "20%",
    className: "mb-4"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "99%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "98%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "95%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "97%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(Div, {
    mobile: true
  }, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "40%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "35%",
    className: "mb-4"
  })), /*#__PURE__*/_react["default"].createElement(Div, {
    desktop: true
  }, /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "97%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "94%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "98%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "94%",
    className: "mb-4"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "98%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "95%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "97%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "40%",
    className: "mb-2"
  }), /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    text: true,
    width: "35%",
    className: "mb-4"
  })))));
};

exports.ProductPlaceholder = ProductPlaceholder;

var Container = _styledComponents["default"].div.attrs({
  className: 'mx-auto mt-5'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 144rem;\n"])));

var ImageContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  min-width: 100%;\n  max-width: 100%;\n  padding-bottom: ", "%;\n\n  @media (min-width: ", ") {\n    width: calc(50% - 0.8rem);\n    margin-bottom: 1.6rem;\n  }\n"])), function (props) {
  return props.imagesConfig.ratio.height / props.imagesConfig.ratio.width * 100;
}, function (_ref) {
  var theme = _ref.theme;
  return theme.breakpoints.lg.min;
});

var ImageFlex = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 100vw;\n  overflow: hidden;\n  display: ", ";\n\n  @media (min-width: ", ") {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    width: calc(100% - 32rem - 2.2rem);\n  }\n"])), function (props) {
  return props.desktop ? 'none' : 'flex';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Div = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n\n  ", "\n\n  ", "\n"])), function (props) {
  return props.mobile && "\n        @media(min-width: " + props.theme.breakpoints.lg.min + ") {\n            display: none;\n        }\n    ";
}, function (props) {
  return props.desktop && "\n        display: none;\n\n        @media(min-width: " + props.theme.breakpoints.lg.min + ") {\n            display: block;\n        }\n    ";
});

var Flex = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var TextContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    min-width: 32rem;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map