"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;

var ProductPreview = function ProductPreview(_ref) {
  var item = _ref.item;
  var labels = (0, _lib.useStrings)('order');

  var _useBasketLineItem = (0, _lib.useBasketLineItem)({
    item: item
  }),
      sku = _useBasketLineItem.sku,
      unitPrice = _useBasketLineItem.unitPrice,
      unitDiscountedPrice = _useBasketLineItem.unitDiscountedPrice,
      totalPrice = _useBasketLineItem.totalPrice,
      quantityInBasket = _useBasketLineItem.quantityInBasket,
      name = _useBasketLineItem.name,
      images = _useBasketLineItem.images,
      totalDiscountedPrice = _useBasketLineItem.totalDiscountedPrice,
      getAttributeByKey = _useBasketLineItem.getAttributeByKey;

  var _usePrice = (0, _lib.usePrice)({
    price: totalPrice,
    discountedPrice: totalDiscountedPrice
  }),
      price = _usePrice.price,
      discountPrice = _usePrice.discountPrice,
      discountPercentage = _usePrice.discountPercentage;

  var _usePrice2 = (0, _lib.usePrice)({
    price: totalPrice
  }),
      totalPriceFormatted = _usePrice2.price;

  var _useConfigState = (0, _lib.useConfigState)(),
      attributeKeys = _useConfigState.attributeKeys;

  var sizeAttribute = getAttributeByKey(attributeKeys == null ? void 0 : attributeKeys.size);

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

  var sizeDisplayValue = !!sizeAttribute && sizeAttribute.label + ": " + sizeAttribute.value;
  var colorAttribute = getAttributeByKey(attributeKeys == null ? void 0 : attributeKeys.color);
  var colorDisplayValue = !!colorAttribute && colorAttribute.label + ": " + colorAttribute.value;
  return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {},
    defaultImageWidth: "20rem",
    imagesMap: images == null ? void 0 : images[0]
  })), /*#__PURE__*/_react["default"].createElement(Right, null, /*#__PURE__*/_react["default"].createElement(Name, null, name), /*#__PURE__*/_react["default"].createElement(SKU, null, infoMessages.sku, ": ", sku), /*#__PURE__*/_react["default"].createElement(Color, null, colorDisplayValue), /*#__PURE__*/_react["default"].createElement(Size, null, sizeDisplayValue), /*#__PURE__*/_react["default"].createElement(Quantity, null, labels.quantity, ": ", quantityInBasket), /*#__PURE__*/_react["default"].createElement(PriceCon, {
    withDiscount: Boolean(discountPrice)
  }, discountPrice ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Price, {
    isDiscount: true
  }, discountPrice.displayValue), /*#__PURE__*/_react["default"].createElement(Price, {
    isOldPrice: true
  }, price.displayValue), /*#__PURE__*/_react["default"].createElement(DiscountPercentageWrapper, null, /*#__PURE__*/_react["default"].createElement(DiscountPercentage, null, "-" + discountPercentage + "%")))) : /*#__PURE__*/_react["default"].createElement(Price, null, totalPriceFormatted.displayValue))));
};

exports.ProductPreview = ProductPreview;

var ImageContainer = _styledComponents["default"].div.attrs({
  className: 'mr-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 20rem;\n  min-width: 20rem;\n  @media (max-width: ", ") {\n    min-width: 12rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
});

var Item = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'col-12 d-flex',
  as: 'li',
  variant: 5
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Right = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Quantity = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var Name = _styledComponents["default"].p.attrs({
  className: 'd-block mb-2'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Size = _styledComponents["default"].p.attrs({
  className: 'd-block mb-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Color = _styledComponents["default"].p.attrs({
  className: 'd-block mb-2'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Row = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Price = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'mr-2'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", ";\n  ", ";\n"])), function (props) {
  return props.isOldPrice && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      text-decoration: line-through;\n      opacity: 0.4;\n    "])));
}, function (props) {
  return props.isDiscount && "\n    color: " + props.theme.palette.discount + ";\n    ";
});

var PriceCon = _styledComponents["default"].div.attrs({
  className: 'd-block mt-1'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", "\n"])), function (props) {
  return !props.withDiscount && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      & span {\n        color: ", ";\n      }\n    "])), function (_ref4) {
    var theme = _ref4.theme;
    return theme.palette.primary;
  });
});

var DiscountPercentageWrapper = _styledComponents["default"].div.attrs({
  className: 'px-2'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-radius: 0.3rem;\n  width: fit-content;\n\n  background-color: ", ";\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.discount;
});

var DiscountPercentage = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 7,
  color: 'secondary'
})(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 0.2rem;\n"])));
var SKU = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 7,
  className: ' mb-2'
})(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.hint;
});
//# sourceMappingURL=index.js.map