"use strict";

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

exports.__esModule = true;
exports.ProductCard = 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, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

var ProductCard = function ProductCard(_ref) {
  var item = _ref.item,
      setRestock = _ref.setRestock,
      setVariant = _ref.setVariant,
      setProducts = _ref.setProducts,
      index = _ref.index,
      products = _ref.products,
      update = _ref.update,
      lastItem = _ref.lastItem;

  var _useBasketLineItem = (0, _lib.useBasketLineItem)({
    item: item
  }),
      name = _useBasketLineItem.name,
      images = _useBasketLineItem.images,
      brand = _useBasketLineItem.brand,
      sku = _useBasketLineItem.sku,
      productId = _useBasketLineItem.productId,
      variantId = _useBasketLineItem.variantId,
      offerId = _useBasketLineItem.offerId,
      inventory = _useBasketLineItem.inventory,
      getAttributeByKey = _useBasketLineItem.getAttributeByKey,
      quantityInBasket = _useBasketLineItem.quantityInBasket,
      price = _useBasketLineItem.unitPrice;

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

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

  var maxQuantity = inventory == null ? void 0 : inventory.availableQuantity;
  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 _useBasket = (0, _lib.useBasket)({
    productId: productId,
    variantId: variantId,
    offerId: offerId,
    quantity: maxQuantity
  }),
      removeFromBasket = _useBasket.removeFromBasket;

  var handleRemoveFromBasket = function handleRemoveFromBasket() {
    products == null ? void 0 : products.splice(index, 1);
    setProducts(products);
    update();
    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: productId,
        sku: sku
      },
      currencyCode: price == null ? void 0 : price.currencyCode
    });
  };

  var handleRestock = function handleRestock() {
    setVariant({
      size: sizeDisplayValue,
      color: colorDisplayValue,
      quantity: quantityInBasket,
      productId: productId,
      variantId: variantId,
      offerId: offerId != null ? offerId : '',
      sku: sku,
      images: images,
      name: name,
      currencyCode: price == null ? void 0 : price.currencyCode
    });
    setRestock();
  };

  return /*#__PURE__*/_react["default"].createElement(Container, {
    isLast: lastItem
  }, /*#__PURE__*/_react["default"].createElement(Brand, {
    mobile: true
  }, brand == null ? void 0 : brand.name), /*#__PURE__*/_react["default"].createElement(Name, {
    mobile: true
  }, name), /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex"
  }, /*#__PURE__*/_react["default"].createElement(Image, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      lg: '20vw',
      xl: '20vw',
      xxl: '20vw'
    },
    defaultImageWidth: "10vw",
    imagesMap: images == null ? void 0 : images[0],
    alt: name
  })), /*#__PURE__*/_react["default"].createElement(ProductInfo, null, /*#__PURE__*/_react["default"].createElement(Brand, null, brand == null ? void 0 : brand.name), /*#__PURE__*/_react["default"].createElement(Name, null, name), /*#__PURE__*/_react["default"].createElement("span", {
    className: "my-2"
  }, /*#__PURE__*/_react["default"].createElement(Attrs, null, sizeDisplayValue), /*#__PURE__*/_react["default"].createElement(Attrs, null, colorDisplayValue)), /*#__PURE__*/_react["default"].createElement(SKU, null, "SKU: ", sku), /*#__PURE__*/_react["default"].createElement(CTA, null, /*#__PURE__*/_react["default"].createElement(Label, {
    onClick: handleRemoveFromBasket
  }, "Remove product"), /*#__PURE__*/_react["default"].createElement(Label, {
    onClick: handleRestock
  }, "Notify me when back in stock")))), /*#__PURE__*/_react["default"].createElement(CTA, {
    mobile: true
  }, /*#__PURE__*/_react["default"].createElement(Label, {
    onClick: handleRemoveFromBasket
  }, "Remove product"), /*#__PURE__*/_react["default"].createElement(Label, {
    onClick: handleRestock
  }, "Notify me when back in stock")), /*#__PURE__*/_react["default"].createElement(Divider, {
    isLast: lastItem
  }));
};

exports.ProductCard = ProductCard;

var Container = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: "d-flex flex-column flex-lg-row " + (props.isLast ? '' : 'my-lg-4')
  };
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Image = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: 15rem;\n  @media (max-width: ", ") {\n    min-width: 10rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
});

var ProductInfo = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column ml-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));

var Brand = (0, _styledComponents["default"])(_Common.Typography).attrs(function (props) {
  return {
    variant: 5,
    className: "" + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 600;\n"])));
var Name = (0, _styledComponents["default"])(_Common.Typography).attrs(function (props) {
  return {
    variant: 5,
    className: "" + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var Attrs = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});
var SKU = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 7,
  className: 'mt-0 mt-lg-2'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
});

var CTA = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex') + " mt-auto flex-column flex-md-row "
  };
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Label = _styledComponents["default"].span.attrs({
  className: 'mr-4 mt-2 mt-lg-0'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: fit-content;\n  border-bottom: 1px solid ", ";\n  color: ", ";\n  padding-bottom: 2px;\n\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.hint;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.hint;
});

var Divider = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: (props.isLast ? 'd-none' : 'd-flex ') + " my-4"
  };
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-bottom: 0.1rem solid ", ";\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.grey;
});
//# sourceMappingURL=ProductCard.js.map