"use strict";

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

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

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

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

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

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

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

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

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

var Item = function Item(_ref) {
  var _images$;

  var item = _ref.item;

  var _useBasketLineItem = (0, _lib.useBasketLineItem)({
    item: item
  }),
      lineItemId = _useBasketLineItem.lineItemId,
      images = _useBasketLineItem.images,
      name = _useBasketLineItem.name,
      slug = _useBasketLineItem.slug,
      totalPrice = _useBasketLineItem.totalPrice,
      totalDiscountedPrice = _useBasketLineItem.totalDiscountedPrice,
      qty = _useBasketLineItem.quantityInBasket,
      getAttributeByKey = _useBasketLineItem.getAttributeByKey;

  var labels = (0, _lib.useLocalLabels)();

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

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

  var sizeAttribute = getAttributeByKey(attributeKeys == null ? void 0 : attributeKeys.size);
  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(Container, {
    key: 'Item__' + lineItemId
  }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: "/" + slug + "/p"
  }, /*#__PURE__*/_react["default"].createElement("a", {
    key: "Item__" + lineItemId + "_Link",
    style: {
      display: 'flex'
    }
  }, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {},
    imagesMap: images == null ? void 0 : images[0],
    defaultImageWidth: images == null ? void 0 : (_images$ = images[0]) == null ? void 0 : _images$.small.width,
    backgroundOverImage: true
  })), /*#__PURE__*/_react["default"].createElement(Right, null, /*#__PURE__*/_react["default"].createElement(Name, null, name), /*#__PURE__*/_react["default"].createElement(Size, null, sizeDisplayValue), /*#__PURE__*/_react["default"].createElement(Color, null, colorDisplayValue), /*#__PURE__*/_react["default"].createElement(Quantity, null, labels.quantityLabel, ": ", qty), /*#__PURE__*/_react["default"].createElement(PriceCon, {
    withDiscount: Boolean(discountPrice)
  }, discountPrice ? /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Price, {
    isDiscount: true
  }, discountPrice == null ? void 0 : 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, price == null ? void 0 : price.displayValue))))));
};

exports.Item = Item;

var Container = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n"])));

var ImageContainer = _styledComponents["default"].div.attrs({
  className: 'mr-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 8rem;\n  min-width: 8rem;\n"])));

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

var Quantity = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

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

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

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

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

var Price = _styledComponents["default"].span.attrs({
  className: 'pr-1'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\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    "])));
});

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

var DiscountPercentage = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 7,
  color: 'secondary'
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 0.2rem;\n"])));

var PriceCon = _styledComponents["default"].div.attrs({
  className: 'd-flex mt-1'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  > span {\n    margin-right: 0.6rem;\n  }\n  ", "\n"])), function (props) {
  return !props.withDiscount && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      & span {\n        color: ", ";\n      }\n    "])), function (_ref3) {
    var theme = _ref3.theme;
    return theme.palette.primary;
  });
});
//# sourceMappingURL=index.js.map