"use strict";

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

exports.__esModule = true;
exports.Favorites = 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 _Header = require("../Header");

var _Components = require("./Components");

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

var _templateObject, _templateObject2;

var Favorites = function Favorites(_ref) {
  var title = _ref.title,
      labels = _ref.labels;

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

  var _useWishlistItems = (0, _lib.useWishlistItems)({
    limit: wishlist.limit
  }),
      items = _useWishlistItems.items,
      fetchMore = _useWishlistItems.fetchMore,
      showPlaceholders = _useWishlistItems.showPlaceholders;

  (0, _lib.useOnScrollToBottom)({
    callback: fetchMore,
    isDisabled: showPlaceholders,
    threshold: 420
  });
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_Header.Header, {
    small: true,
    isTopTitle: true,
    content: title
  }), !showPlaceholders && !(items != null && items.length) && /*#__PURE__*/_react["default"].createElement(EmptyWishlistContainer, null, labels.empty), /*#__PURE__*/_react["default"].createElement("div", {
    className: "row g-3 g-md-4 g-lg-5"
  }, items == null ? void 0 : items.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(_Components.ProductCard, {
      labels: labels,
      data: item,
      key: item == null ? void 0 : item._id
    });
  })), showPlaceholders && /*#__PURE__*/_react["default"].createElement(_Components.FavoritePlaceholder, null));
};

exports.Favorites = Favorites;

var Container = _styledComponents["default"].section.attrs({
  className: 'container-fluid'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var EmptyWishlistContainer = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'd-flex pt-4 pt-lg-0 align-items-lg-center justify-content-center',
  variant: 5,
  as: 'p'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 28rem;\n  position: relative;\n  text-align: center;\n"])));
//# sourceMappingURL=favorites.component.js.map