"use strict";

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

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

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

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

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

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

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

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

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

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

var _reactStickyBox = _interopRequireDefault(require("react-sticky-box"));

var _Navbar = require("../../../Navbar");

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

var filterChildren = function filterChildren(element, current, config) {
  if (element.url === current) {
    var _config$seoAggregates, _config$seoAggregates2;

    return {
      component: (_config$seoAggregates = config.seoAggregates) == null ? void 0 : _config$seoAggregates.component,
      items: element.children.map(function (child) {
        return {
          name: child.name,
          url: child.url
        };
      }),
      name: (_config$seoAggregates2 = config.seoAggregates) == null ? void 0 : _config$seoAggregates2.label
    };
  } else if (element.children.length > 1) {
    var result;

    for (var i = 0; result == null && i < element.children.length; i++) {
      result = filterChildren(element.children[i], current, config);
    }

    return result;
  }
};

var ListingPageComponent = function ListingPageComponent(_ref) {
  var _currentChildren$;

  var contentInside = _ref.contentInside,
      contentUnderTitle = _ref.contentUnderTitle;

  var _useListingItems = (0, _lib.useListingItems)(),
      isLoading = _useListingItems.isLoading,
      items = _useListingItems.items,
      total = _useListingItems.total;

  var config = (0, _lib.useListingConfig)();

  var _useListingBreadcrumb = (0, _lib.useListingBreadcrumbs)(),
      breadcrumbData = _useListingBreadcrumb.data,
      lastBreadcrumb = _useListingBreadcrumb.last,
      isBreadcrumbLoading = _useListingBreadcrumb.isLoading;

  var _useListingCategories = (0, _lib.useListingCategories)(),
      categoryTree = _useListingCategories.data,
      isCategoryTreeLoading = _useListingCategories.isLoading,
      currentCategory = _useListingCategories.currentCategory;

  var currentChildren = _react["default"].useMemo(function () {
    var data = categoryTree == null ? void 0 : categoryTree.map(function (element) {
      return filterChildren(element, currentCategory, config);
    });
    return data == null ? void 0 : data.filter(function (x) {
      return x;
    });
  }, [categoryTree, currentCategory, config]);

  var _useListingFilters = (0, _lib.useListingFilters)(),
      filtersData = _useListingFilters.data,
      isFiltersQueryFetching = _useListingFilters.isFetching,
      isFiltersQueryLoading = _useListingFilters.isLoading,
      clearAllFilters = _useListingFilters.clearAllFilters;

  var selectedFilters = (0, _lib.useAllSelectedFilters)(filtersData);
  (0, _lib.useRelevaOnListingPage)({
    items: items,
    selectedFilters: selectedFilters,
    isLoading: isLoading
  });
  (0, _lib.usePixelProductsImpression)({
    productsData: {
      products: items
    }
  });
  var direction = (0, _lib.useScrollDirection)({
    downThreshold: 50,
    upThreshold: 10,
    defaultValue: 'up'
  });
  var hasSeoAgg = Boolean(config.type.toString() !== 'search');

  var _useBoolean = (0, _lib.useBoolean)(),
      isTranslatable = _useBoolean[0],
      setIsTranslatable = _useBoolean[1];

  var _useBoolean2 = (0, _lib.useBoolean)(),
      removeMargin = _useBoolean2[0],
      setRemoveMargin = _useBoolean2[1];

  var _usePromoCode = (0, _lib.usePromoCode)(),
      hasActiveVoucher = _usePromoCode.hasActiveVoucher;

  var _useUIState = (0, _lib.useUIState)(),
      displayNavbar = _useUIState.displayNavbar;

  (0, _react.useEffect)(function () {
    var onScroll = function onScroll() {
      var currentPosition = window.pageYOffset;

      if (currentPosition > 300) {
        setRemoveMargin.on();

        if (displayNavbar) {
          setIsTranslatable.on();
        } else {
          setIsTranslatable.off();
        }
      } else {
        setRemoveMargin.off();
        setIsTranslatable.off();
      }
    };

    window.addEventListener('scroll', onScroll);
    return function () {
      return window.removeEventListener('scroll', onScroll);
    };
  }, []);
  var sizes = filtersData == null ? void 0 : filtersData.find(function (el) {
    return el.name === 'Size';
  });
  var listingMeta = (0, _lib.useListingMeta)();
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "container-md-fluid"
  }, /*#__PURE__*/_react["default"].createElement(LineItemsWrapper, null, /*#__PURE__*/_react["default"].createElement(MobileStickyHead, {
    translateFilters: direction === 'up' && isTranslatable,
    withPromo: !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(HeaderWrapper, null, /*#__PURE__*/_react["default"].createElement(_.MobileBackButton, {
    last: lastBreadcrumb
  }), /*#__PURE__*/_react["default"].createElement(_.SearchMeta, {
    data: listingMeta,
    total: total
  }), /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, listingMeta.displayName), /*#__PURE__*/_react["default"].createElement(SortAndFiltersWrapper, null, /*#__PURE__*/_react["default"].createElement(_.SortStrip, null), /*#__PURE__*/_react["default"].createElement(FiltersButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_.FiltersButton, {
    data: filtersData,
    renderFilters: function renderFilters(onClose) {
      return /*#__PURE__*/_react["default"].createElement(_.FiltersModal, {
        data: filtersData,
        isLoading: isFiltersQueryLoading,
        isFetching: isFiltersQueryFetching,
        onClose: onClose,
        totalResults: total,
        clearFilters: clearAllFilters,
        filtersCount: selectedFilters.length
      });
    }
  }))))), /*#__PURE__*/_react["default"].createElement(SeoFilters, {
    hasSeoAgg: hasSeoAgg
  }, /*#__PURE__*/_react["default"].createElement(_reactStickyBox["default"], {
    offsetTop: 0
  }, /*#__PURE__*/_react["default"].createElement(Sidebar, {
    translateFilters: direction === 'up' && isTranslatable,
    withPromo: !hasActiveVoucher
  }, !isCategoryTreeLoading && categoryTree && /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-none d-lg-block"
  }, /*#__PURE__*/_react["default"].createElement(_.CategoryTree, {
    data: categoryTree,
    currentCategory: currentCategory
  })), !isCategoryTreeLoading && currentChildren && /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-lg-none"
  }, /*#__PURE__*/_react["default"].createElement(_.Aggregates, {
    data: currentChildren
  })), !isFiltersQueryLoading && !isCategoryTreeLoading && sizes && (currentChildren == null ? void 0 : (_currentChildren$ = currentChildren[0]) == null ? void 0 : _currentChildren$.items.length) === 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-lg-none"
  }, /*#__PURE__*/_react["default"].createElement(_.SizesList, {
    items: sizes.items
  }))))), /*#__PURE__*/_react["default"].createElement(LineItems, {
    hasSeoAgg: hasSeoAgg
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-none d-lg-block"
  }, /*#__PURE__*/_react["default"].createElement(_Common.Breadcrumbs, {
    data: breadcrumbData,
    isLoading: isLoading,
    noPaddingLeft: true
  })), /*#__PURE__*/_react["default"].createElement(StickyHead, {
    translateFilters: direction === 'up' && isTranslatable,
    withPromo: !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(HeaderWrapper, {
    removeMargin: removeMargin
  }, /*#__PURE__*/_react["default"].createElement(_.MobileBackButton, {
    last: lastBreadcrumb
  }), /*#__PURE__*/_react["default"].createElement(_.SearchMeta, {
    data: listingMeta,
    total: total
  }), isBreadcrumbLoading ? /*#__PURE__*/_react["default"].createElement(_Common.Placeholder, {
    width: "20rem"
  }) : /*#__PURE__*/_react["default"].createElement(HeaderTitle, null, listingMeta.displayName, ' ', config.type !== _lib.ListingTypesEnum.Search && "(" + total + ")"), /*#__PURE__*/_react["default"].createElement(SortAndFiltersWrapper, null, /*#__PURE__*/_react["default"].createElement(_.SortStrip, null), /*#__PURE__*/_react["default"].createElement(FiltersButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_.FiltersButton, {
    data: filtersData,
    renderFilters: function renderFilters(onClose) {
      return /*#__PURE__*/_react["default"].createElement(_.FiltersModal, {
        data: filtersData,
        isLoading: isFiltersQueryLoading,
        isFetching: isFiltersQueryFetching,
        onClose: onClose,
        totalResults: total,
        clearFilters: clearAllFilters,
        filtersCount: selectedFilters.length
      });
    }
  })))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-none d-lg-block mb-1"
  }, !!filtersData && /*#__PURE__*/_react["default"].createElement(_Components.SelectedFilters, {
    data: filtersData
  }))), !Boolean(items == null ? void 0 : items.length) && /*#__PURE__*/_react["default"].createElement(_.NoResults, {
    isLoading: false,
    isCategory: true
  }), /*#__PURE__*/_react["default"].createElement(_lib.RenderInjectedContent, {
    componentList: contentUnderTitle
  }), /*#__PURE__*/_react["default"].createElement(_.ProductList, {
    hasSeoAgg: hasSeoAgg,
    items: items,
    contentInside: contentInside
  })))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_.Pagination, null)));
};

exports.ListingPageComponent = ListingPageComponent;

var StickyHead = _styledComponents["default"].div.attrs({
  className: 'pl-lg-0 d-none d-lg-block'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: sticky;\n  top: 0;\n  background: ", ";\n  z-index: 99;\n  transition: transform ", ";\n  transform: translateY(\n    ", "\n  );\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
}, _Navbar.NAV_ANIMATION, function (props) {
  return props.translateFilters ? props.withPromo ? _Navbar.NAV_HEIGHT_WITH_VOUCHER : _Navbar.NAV_HEIGHT : '0';
});

var MobileStickyHead = _styledComponents["default"].div.attrs({
  className: 'container-fluid pl-lg-0 d-block d-lg-none'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: sticky;\n  top: 0;\n  background: ", ";\n  z-index: 99;\n  transition: transform ", ";\n  transform: translateY(\n    ", "\n  );\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, _Navbar.NAV_ANIMATION, function (props) {
  return props.translateFilters ? props.withPromo ? _Navbar.NAV_HEIGHT_WITH_VOUCHER : _Navbar.NAV_HEIGHT : '0';
});

var HeaderWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between align-items-center mb-3 mt-3 mt-lg-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 4.7rem;\n  flex-wrap: wrap;\n  ", ";\n  transition: margin ", ";\n  @media (max-width: ", ") {\n    flex-wrap: nowrap;\n  }\n"])), function (props) {
  return props.removeMargin && "\n    margin-bottom: 0 !important;\n  ";
}, _Navbar.NAV_ANIMATION, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.sm.max;
});

var SortAndFiltersWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center pl-3 ml-auto mr-lg-3 mr-lg-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var FiltersButtonWrapper = _styledComponents["default"].div.attrs({
  className: 'ml-1'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var LineItemsWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-wrap'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  height: 100%;\n"])));

var SeoFilters = _styledComponents["default"].div.attrs({
  className: 'mr-lg-5 '
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: ", ";\n  pointer-events: ", ";\n  max-width: 100%;\n  position: relative;\n  z-index: 10;\n  @media (min-width: ", ") {\n    min-width: 21.6rem;\n    max-width: 21.6rem;\n  }\n"])), function (props) {
  return props.isDisabled ? 0.4 : 1;
}, function (props) {
  return props.isDisabled ? 'none' : 'all';
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
});

var LineItems = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  @media (min-width: ", ") {\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.hasSeoAgg ? 'calc(100% - 26.4rem)' : '100%';
}, function (props) {
  return props.hasSeoAgg ? 'calc(100% - 26.4rem)' : '100%';
});

var Sidebar = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  transition: transform ", ";\n  transform: translateY(\n    ", "\n  );\n"])), _Navbar.NAV_ANIMATION, function (props) {
  return props.translateFilters ? props.withPromo ? _Navbar.NAV_HEIGHT_WITH_VOUCHER : _Navbar.NAV_HEIGHT : '0';
});

var HeaderTitle = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    font-weight: 700;\n  }\n  @media (min-width: ", ") {\n    font-size: 2rem;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.sm.max;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map