"use strict";

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

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

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

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

var _link = _interopRequireDefault(require("next/link"));

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

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

var _Typography = require("../../../../../Common/Typography");

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

var _2 = require("../");

var _Icons = require("../../../../../Common/Icons");

var _VariantsLoader = require("../VariantsLoader");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;

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

  var item = _ref.item,
      close = _ref.close,
      errorRef = _ref.errorRef;

  var _useBasketLineItem = (0, _lib.useBasketLineItem)({
    item: item
  }),
      name = _useBasketLineItem.name,
      price = _useBasketLineItem.unitPrice,
      discountedPrice = _useBasketLineItem.unitDiscountedPrice,
      quantityInBasket = _useBasketLineItem.quantityInBasket,
      inventory = _useBasketLineItem.inventory,
      productId = _useBasketLineItem.productId,
      variantId = _useBasketLineItem.variantId,
      collapseKey = _useBasketLineItem.collapseKey,
      images = _useBasketLineItem.images,
      slug = _useBasketLineItem.slug,
      getAttributeByKey = _useBasketLineItem.getAttributeByKey,
      sku = _useBasketLineItem.sku,
      offerId = _useBasketLineItem.offerId,
      total = _useBasketLineItem.totalPrice,
      totalDiscountedPrice = _useBasketLineItem.totalDiscountedPrice,
      status = _useBasketLineItem.status;

  var _usePixel = (0, _lib.usePixel)(),
      pixelRemoveLineItem = _usePixel.pixelRemoveLineItem;

  var canPurchase = status === _lib.LineItemDTOStatusEnum.CanPurchase;

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

  var _React$useState = _react["default"].useState(false),
      openModal = _React$useState[0],
      setOpenModal = _React$useState[1];

  var maxQuantity = inventory.availableQuantity;
  var hasQuantity = inventory.hasAvailableQuantity;

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

  var _usePrice2 = (0, _lib.usePrice)({
    price: total,
    discountedPrice: totalDiscountedPrice
  }),
      totalPrice = _usePrice2.price,
      totalDiscounted = _usePrice2.discountPrice;

  var _React$useState2 = _react["default"].useState({
    price: price == null ? void 0 : price.value,
    discountedPrice: discountedPrice == null ? void 0 : discountedPrice.value
  }),
      priceState = _React$useState2[0],
      setPriceState = _React$useState2[1];

  var _useBasket = (0, _lib.useBasket)({
    productId: productId,
    variantId: variantId,
    offerId: offerId,
    quantity: maxQuantity
  }),
      removeFromBasket = _useBasket.removeFromBasket,
      setLineItemQuantity = _useBasket.setLineItemQuantity;

  var _useWishlist = (0, _lib.useWishlist)({
    productId: productId,
    collapseKey: collapseKey
  }),
      addToWishlist = _useWishlist.addToWishlist,
      isInWishlist = _useWishlist.isInWishlist;

  var onQuantityChange = function onQuantityChange(e) {
    setLineItemQuantity(+e.target.value);
  };

  var handleMoveToWishlist = function handleMoveToWishlist() {
    if (!isInWishlist) {
      addToWishlist();
      removeFromBasket();
      pixelRemoveLineItem({
        product: {
          id: productId,
          sku: sku
        },
        currencyCode: price == null ? void 0 : price.currencyCode
      });
    }
  };

  var _React$useState3 = _react["default"].useState(false),
      openVariantsLoader = _React$useState3[0],
      setOpenVariantsLoader = _React$useState3[1];

  var handleClick = function handleClick() {
    setOpenVariantsLoader(true);
    setOpenModal(true);
  };

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

  var image = images == null ? void 0 : (_images$ = images[0]) == null ? void 0 : _images$.medium;
  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;

  var handleRemoveFromBasket = function handleRemoveFromBasket() {
    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: productId,
        sku: sku
      },
      currencyCode: price == null ? void 0 : price.currencyCode
    });
    close == null ? void 0 : close();
  };

  var isDesktop = (0, _lib.useIsDesktop)();
  return /*#__PURE__*/_react["default"].createElement(Container, {
    ref: !canPurchase ? errorRef : undefined
  }, /*#__PURE__*/_react["default"].createElement(ImageWrapper, null, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/" + slug + "/p",
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement("a", null, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
    src: image == null ? void 0 : image.url,
    width: image == null ? void 0 : image.width,
    height: image == null ? void 0 : image.height,
    backgroundOverImage: true
  }), discountedPrice && /*#__PURE__*/_react["default"].createElement(DiscountPercentage, null, "-", discountPercentage, "%"))), /*#__PURE__*/_react["default"].createElement(Mobile, null, /*#__PURE__*/_react["default"].createElement(_lib.WishlistButton, {
    productId: productId,
    collapseKey: collapseKey
  }, /*#__PURE__*/_react["default"].createElement(FavoritesWrapper, {
    onClick: handleMoveToWishlist
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconFavorites, null))))), /*#__PURE__*/_react["default"].createElement(DetailsContainer, null, /*#__PURE__*/_react["default"].createElement(Flex, null, !isDesktop ? /*#__PURE__*/_react["default"].createElement(_lib.OverflowEllipsis, {
    lineHeight: 25,
    lines: 2
  }, /*#__PURE__*/_react["default"].createElement(Name, null, name)) : /*#__PURE__*/_react["default"].createElement(Name, null, name), /*#__PURE__*/_react["default"].createElement(Desktop, null, hasQuantity ? /*#__PURE__*/_react["default"].createElement(QuantitySelector, null, /*#__PURE__*/_react["default"].createElement(SelectQuantity, {
    defaultValue: quantityInBasket,
    onChange: onQuantityChange
  }, Array.from({
    length: maxQuantity
  }, function (_, val) {
    return /*#__PURE__*/_react["default"].createElement("option", {
      key: "quantity__" + (val + 1),
      value: val + 1
    }, val + 1);
  })), /*#__PURE__*/_react["default"].createElement(_Icons.IconArrowDown, null)) : /*#__PURE__*/_react["default"].createElement(RedLabel, null, infoMessages.outOfStock))), openVariantsLoader && /*#__PURE__*/_react["default"].createElement(_VariantsLoader.VariantsLoader, {
    item: item,
    slug: slug,
    openSelectSizeModal: openModal,
    handleClose: function handleClose() {
      return setOpenModal(false);
    },
    priceState: priceState,
    updatePrice: setPriceState,
    variantId: variantId,
    hasQuantity: hasQuantity
  }), /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(AttributesContainer, null, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement(SKU, null, infoMessages.sku, ": ", sku), colorAttribute && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ColorDisplay, null, colorDisplayValue)), sizeAttribute && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", {
    className: "d-flex"
  }, /*#__PURE__*/_react["default"].createElement("span", null, sizeDisplayValue, " "), /*#__PURE__*/_react["default"].createElement(SelectSize, {
    onClick: handleClick
  }, buttons.changeSize)))), /*#__PURE__*/_react["default"].createElement(Mobile, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "pt-2"
  }), /*#__PURE__*/_react["default"].createElement(QuantitySelector, null, /*#__PURE__*/_react["default"].createElement(SelectQuantity, {
    defaultValue: quantityInBasket,
    onChange: onQuantityChange
  }, Array.from({
    length: maxQuantity
  }, function (_, val) {
    return /*#__PURE__*/_react["default"].createElement("option", {
      key: "quantity__" + (val + 1),
      value: val + 1
    }, val + 1);
  })), /*#__PURE__*/_react["default"].createElement(_Icons.IconArrowDown, null)))), quantityInBasket > 1 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, discountPrice ? /*#__PURE__*/_react["default"].createElement(Col, null, /*#__PURE__*/_react["default"].createElement(SinglePriceLabel, null, "\u0417\u0430 1\u0431\u0440: "), /*#__PURE__*/_react["default"].createElement(TotalOldPrice, null, productPrice.displayValue), /*#__PURE__*/_react["default"].createElement(SinglePrice, {
    discounted: true
  }, discountPrice.displayValue)) : /*#__PURE__*/_react["default"].createElement(SinglePrice, null, productPrice.displayValue))), /*#__PURE__*/_react["default"].createElement(Mobile, null, /*#__PURE__*/_react["default"].createElement(RemoveFromBasketContainer, {
    onClick: handleRemoveFromBasket
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconClose, {
    style: {
      width: '1.2rem'
    }
  }))), /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(Desktop, null, /*#__PURE__*/_react["default"].createElement(_2.ActionsWrapper, {
    isAlreadyInWishlist: Boolean(isInWishlist),
    handleMoveToWishlist: handleMoveToWishlist,
    handleRemoveFromBasket: handleRemoveFromBasket
  })), /*#__PURE__*/_react["default"].createElement(Price, {
    mobile: true
  }, discountPrice ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(OldPrice, null, productPrice.displayValue), /*#__PURE__*/_react["default"].createElement(TotalPrice, {
    discounted: true
  }, discountPrice.displayValue)) : /*#__PURE__*/_react["default"].createElement(TotalPrice, null, productPrice.displayValue)), /*#__PURE__*/_react["default"].createElement(Price, null, discountPrice ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(OldPrice, null, totalPrice.displayValue), /*#__PURE__*/_react["default"].createElement(TotalPrice, {
    discounted: true
  }, totalDiscounted == null ? void 0 : totalDiscounted.displayValue)) : /*#__PURE__*/_react["default"].createElement(TotalPrice, null, totalDiscounted == null ? void 0 : totalDiscounted.displayValue)))));
};

exports.Product = Product;

var Container = _styledComponents["default"].div.attrs({
  className: 'py-4 d-flex'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  box-shadow: rgb(229, 229, 229) 0 0 0 0 inset, rgb(229, 229, 229) 0 0 0 0 inset,\n    rgb(229, 229, 229) 0 -0.1rem 0 0 inset, rgb(229, 229, 229) 0 0 0 0 inset;\n  width: 100%;\n  position: relative;\n"])));

var FavoritesWrapper = _styledComponents["default"].button.attrs({
  className: 'p-0 Fav__wrapper'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 0 !important;\n  position: absolute;\n  top: -0.4rem;\n  right: 0.1rem;\n\n  & > svg {\n    width: 3rem;\n    fill: ", ";\n  }\n\n  & path {\n    stroke-width: 1.5;\n  }\n"])), function (props) {
  return props.isFavorite ? props.theme.palette.primary : 'transparent';
});

var RemoveFromBasketContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: -0.4rem;\n  right: -0.7rem;\n  width: 3rem;\n  height: 3rem;\n  background-color: ", ";\n  border-radius: 50%;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
});

var Name = _styledComponents["default"].span.attrs({
  className: 'd-block pr-4 pr-md-1'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  word-break: break-all;\n"])));

var Desktop = _styledComponents["default"].div.attrs({
  className: 'd-none d-md-block'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.3rem;\n"])));

var Mobile = _styledComponents["default"].div.attrs({
  className: 'd-md-none'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ImageWrapper = _styledComponents["default"].div.attrs({
  className: 'mr-4'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  width: 14rem;\n  min-width: 14rem;\n\n  & img {\n    width: 100%;\n  }\n\n  @media (max-width: ", ") {\n    min-width: 9.6rem;\n    width: 9.6rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.sm.max;
});

var DetailsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column justify-content-between flex-grow-1'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var QuantitySelector = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  color: ", ";\n  border: 0.1rem solid ", ";\n  width: 5.6rem;\n  height: 3rem;\n\n  & svg {\n    width: 1.4rem;\n    height: 1.4rem;\n    stroke-width: 2;\n    position: absolute;\n    right: 1rem;\n    top: calc(50% - 0.8rem);\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.disabled;
});

var AttributesContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  & li {\n    margin-bottom: 0.4rem;\n    list-style: none;\n    font-size: 1.4rem;\n    line-height: 1.3;\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
});

var SKU = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: '7',
  className: 'mb-2'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.15rem;\n  color: ", ";\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.hint;
});

var Flex = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  &:last-of-type {\n    margin-top: auto;\n  }\n"])));

var SelectQuantity = _styledComponents["default"].select.attrs({
  className: 'pr-1'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-left: 1rem;\n  height: 100%;\n  width: 100%;\n  color: ", ";\n  background: none;\n  border: 0px;\n  border-radius: 0.2rem;\n  appearance: none;\n  box-shadow: none;\n  outline: 0px;\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.hint;
});

var SelectSize = _styledComponents["default"].div.attrs({
  className: 'ml-2'
})(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.1rem;\n  line-height: 1.8rem;\n  text-decoration: underline;\n  cursor: pointer;\n"])));

var SinglePrice = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  className: 'ml-auto d-none d-md-flex',
  variant: 6
})(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", ";\n"])), function (props) {
  return props.discounted && "\n  color: " + props.theme.palette.discount + ";\n  ";
});
var TotalPrice = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  className: '',
  variant: 5
})(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", ";\n"])), function (props) {
  return props.discounted && "\n  color: " + props.theme.palette.discount + ";\n  ";
});

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

var Price = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  className: ' ml-auto',
  variant: 5
})(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: ", ";\n  align-items: baseline;\n  @media (max-width: ", ") {\n    display: ", ";\n  }\n  > * {\n    margin-left: 1rem;\n  }\n"])), function (props) {
  return props.mobile ? 'none' : 'flex';
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.sm.max;
}, function (props) {
  return props.mobile ? 'flex' : 'none';
});
var TotalOldPrice = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 7,
  className: 'mr-2 d-none d-md-block'
})(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 2.4rem;\n  text-decoration: line-through;\n  opacity: 0.5;\n"])));
var OldPrice = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 6
})(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 2.4rem;\n  text-decoration: line-through;\n  opacity: 0.5;\n"])));
var DiscountPercentage = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  variant: 6,
  color: 'secondary',
  className: 'px-2 mb-1 d-flex align-items-center'
})(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: fit-content;\n  background-color: ", ";\n  @media (max-width: ", ") {\n    left: 0;\n  }\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.discount;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.breakpoints.sm.max;
});

var RedLabel = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center mr-4'
})(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  min-height: 4.4rem;\n"])), function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette.danger;
});

var ColorDisplay = _styledComponents["default"].li.attrs({
  className: 'mb-2'
})(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var SinglePriceLabel = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  className: 'ml-auto d-none d-md-flex mr-2',
  variant: 7
})(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map