"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 _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));

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

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

var _dynamic = _interopRequireDefault(require("next/dynamic"));

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

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

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

var _Price = require("../Price");

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

var VariantsLoader = (0, _dynamic["default"])(function () {
  return Promise.resolve().then(function () {
    return (0, _interopRequireWildcard2["default"])(require('../VariantsLoader'));
  }).then(function (mod) {
    return mod.VariantsLoader;
  });
}, {
  ssr: false
});

var ProductCard = function ProductCard(_ref) {
  var data = _ref.data,
      labels = _ref.labels;

  var _useWishlistItem = (0, _lib.useWishlistItem)({
    item: data
  }),
      productId = _useWishlistItem.productId,
      variantId = _useWishlistItem.variantId,
      collapseKey = _useWishlistItem.collapseKey,
      name = _useWishlistItem.name,
      brand = _useWishlistItem.brand,
      slug = _useWishlistItem.slug,
      images = _useWishlistItem.images,
      unitPrice = _useWishlistItem.unitPrice,
      unitDiscountedPrice = _useWishlistItem.unitDiscountedPrice,
      inventory = _useWishlistItem.inventory,
      offerId = _useWishlistItem.offerId;

  var availableQuantity = inventory.availableQuantity;

  var _useBasket = (0, _lib.useBasket)({
    productId: productId,
    variantId: variantId,
    offerId: offerId,
    quantity: availableQuantity
  }),
      isExisting = _useBasket.isExisting;

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

  var _React$useState2 = _react["default"].useState(false),
      selectSizeModalState = _React$useState2[0],
      setSelectSizeModalState = _React$useState2[1];

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

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

  var isDesktop = (0, _lib.useIsDesktop)();
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Relative, null, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/" + slug + "/p",
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      sm: '50vw',
      md: '33vw',
      lg: '33vw',
      xl: '540px',
      xxl: '540px'
    },
    defaultImageWidth: "50vw",
    imagesMap: images == null ? void 0 : images[0],
    alt: name
  }))), /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(Content, null, isDesktop ? /*#__PURE__*/_react["default"].createElement(TitleDesktop, null, name) : /*#__PURE__*/_react["default"].createElement(TitleMobile, null, name), /*#__PURE__*/_react["default"].createElement(Brand, null, brand)), /*#__PURE__*/_react["default"].createElement(_Price.Price, {
    price: unitPrice,
    discountedPrice: unitDiscountedPrice
  }), /*#__PURE__*/_react["default"].createElement(OnlyWhenHover, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Animated--add-to-basket"
  }, /*#__PURE__*/_react["default"].createElement(AddToBasketButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    fullWidth: true,
    variant: "primary",
    onClick: handleClick
  }, labels == null ? void 0 : labels.addBasketButton))), openVariantsLoader && /*#__PURE__*/_react["default"].createElement(VariantsLoader, {
    slug: slug,
    priceState: priceState,
    updatePrice: setPriceState,
    openSelectSizeModal: selectSizeModalState,
    handleClose: function handleClose() {
      return setSelectSizeModalState(false);
    },
    variantId: variantId
  }))), /*#__PURE__*/_react["default"].createElement(OnlyWhenNoHover, null, /*#__PURE__*/_react["default"].createElement(_lib.WishlistButton, {
    productId: productId,
    collapseKey: collapseKey
  }, /*#__PURE__*/_react["default"].createElement(RemoveFromWishlist, null, /*#__PURE__*/_react["default"].createElement(_Common.IconClose, null)))), /*#__PURE__*/_react["default"].createElement(OnlyWhenHover, null, /*#__PURE__*/_react["default"].createElement(_lib.WishlistButton, {
    productId: productId,
    collapseKey: collapseKey
  }, /*#__PURE__*/_react["default"].createElement(FavoritesWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.IconFavorites, null))))), !isExisting ? /*#__PURE__*/_react["default"].createElement(AddToBasketButton, {
    bordered: true,
    onClick: handleClick
  }, labels == null ? void 0 : labels.addBasketShortButton) : /*#__PURE__*/_react["default"].createElement(AddToBasketButton, null, labels == null ? void 0 : labels.alreadyInBasket));
};

exports.ProductCard = ProductCard;

var Container = _styledComponents["default"].article.attrs({
  className: 'col-6 col-lg-4 d-flex flex-column justify-content-between'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Relative = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  overflow: hidden;\n\n  .Fav__wrapper {\n    opacity: 0.7;\n    @media (min-width: ", ") {\n      opacity: 0;\n    }\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .Animated--add-to-basket {\n    position: absolute;\n    width: calc(100% - 0.8rem);\n    bottom: 0;\n    left: 0.4rem;\n    transform: translateY(100%);\n    opacity: 0;\n    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .Content--container {\n    transform: translateY(0);\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  @media (hover: hover) {\n    @media (min-width: ", ") {\n      &:hover {\n        .Fav__wrapper {\n          transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);\n          opacity: 1;\n        }\n\n        .Content--container {\n          transform: translateY(-6rem);\n        }\n\n        .Animated--add-to-basket {\n          transition-delay: 0.3s;\n          opacity: 1;\n        }\n      }\n    }\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.xl.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.xl.min;
});

var RemoveFromWishlist = _styledComponents["default"].button.attrs({
  className: 'p-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: ", ";\n\n  min-height: 0 !important;\n  position: absolute;\n  top: 0.4rem;\n  left: 1rem;\n\n  & > svg {\n    width: 1rem;\n    fill: ", ";\n  }\n"])), function (props) {
  return props.isFavorite ? 'block' : 'none';
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
});

var AddToBasketButtonWrapper = _styledComponents["default"].div.attrs({
  className: 'pt-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var OnlyWhenHover = _styledComponents["default"].div.attrs({
  className: 'd-none d-lg-block'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (hover: hover) {\n    display: block;\n  }\n"])));

var OnlyWhenNoHover = _styledComponents["default"].div.attrs({
  className: 'd-block d-lg-none'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (hover: hover) {\n    display: none;\n  }\n"])));

var TitleMobile = (0, _styledComponents["default"])(_lib.OverflowEllipsis).attrs({
  as: 'h3',
  lineHeight: 25,
  lines: 2
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: inherit;\n  font-size: inherit;\n  word-break: break-all;\n  overflow: hidden;\n"])));
var TitleDesktop = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h3'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: inherit;\n  font-size: inherit;\n  word-break: break-all;\n  overflow: hidden;\n"])));

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

var Brand = _styledComponents["default"].h4(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: inherit;\n  font-size: inherit;\n  color: ", ";\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.hint;
});

var Flex = _styledComponents["default"].div.attrs({
  className: 'row pt-3 gx-2 gy-0 Content--container'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n  position: relative;\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
});

var Content = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'div',
  variant: 6,
  className: 'col-12 col-lg-7'
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    font-size: 1.6rem;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});
var AddToBasketButton = (0, _styledComponents["default"])(_Common.Button).attrs({
  className: 'd-xl-none d-flex align-items-center justify-content-center mt-2'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  border-radius: 0.4rem !important;\n  font-weight: bold !important;\n"])));
//# sourceMappingURL=index.js.map