import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React, { useEffect } from 'react';
import { useListingBreadcrumbs, useListingFilters, useListingItems, useListingMeta, useListingCategories, useListingConfig, useBoolean, usePromoCode, useAllSelectedFilters, useScrollDirection, useUIState, RenderInjectedContent, useListingPagination, useRelevaOnListingPage, usePixelProductsImpression } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Breadcrumbs, Placeholder } from '../../../Common';
import { MobileBackButton, SearchMeta, SortStrip, FiltersButton, FiltersModal, Pagination, CategoryTree, Aggregates, ProductList, SizesList, NoResults } from '../';
import { SelectedFilters } from '../Aggregates/Components';
import StickyBox from 'react-sticky-box';
import { NAV_ANIMATION, NAV_HEIGHT, NAV_HEIGHT_WITH_VOUCHER } from '../../../Navbar';

var 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(child => ({
        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;
  }
};

export var ListingPageComponent = (_ref) => {
  var _currentChildren$;

  var {
    contentInside,
    contentUnderTitle
  } = _ref;
  var {
    isLoading,
    items,
    total
  } = useListingItems();
  var {
    pagination
  } = useListingPagination();
  var config = useListingConfig();
  var {
    data: breadcrumbData,
    last: lastBreadcrumb,
    isLoading: isBreadcrumbLoading
  } = useListingBreadcrumbs();
  var {
    data: categoryTree,
    isLoading: isCategoryTreeLoading,
    currentCategory
  } = useListingCategories();
  var currentChildren = React.useMemo(() => {
    var data = categoryTree == null ? void 0 : categoryTree.map(element => filterChildren(element, currentCategory, config));
    return data == null ? void 0 : data.filter(x => x);
  }, [categoryTree, currentCategory, config]);
  var {
    data: filtersData,
    isFetching: isFiltersQueryFetching,
    isLoading: isFiltersQueryLoading,
    clearAllFilters
  } = useListingFilters();
  var selectedFilters = useAllSelectedFilters(filtersData);
  useRelevaOnListingPage({
    items,
    selectedFilters,
    isLoading
  });
  usePixelProductsImpression({
    productsData: {
      products: items
    }
  });
  var direction = useScrollDirection({
    downThreshold: 50,
    upThreshold: 10,
    defaultValue: 'up'
  });
  var hasSeoAgg = Boolean(config.type.toString() !== 'search');
  var [isTranslatable, setIsTranslatable] = useBoolean();
  var [removeMargin, setRemoveMargin] = useBoolean();
  var {
    hasActiveVoucher
  } = usePromoCode();
  var {
    displayNavbar
  } = useUIState();
  useEffect(() => {
    var 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 () => window.removeEventListener('scroll', onScroll);
  }, []);
  var sizes = filtersData == null ? void 0 : filtersData.find(el => el.name === 'Size');
  var listingMeta = useListingMeta();
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "container-md-fluid"
  }, /*#__PURE__*/React.createElement(LineItemsWrapper, null, /*#__PURE__*/React.createElement(MobileStickyHead, {
    translateFilters: direction === 'up' && isTranslatable,
    withPromo: !hasActiveVoucher
  }, /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/React.createElement(MobileBackButton, {
    last: lastBreadcrumb
  }), /*#__PURE__*/React.createElement(SearchMeta, {
    data: listingMeta,
    total: total
  }), /*#__PURE__*/React.createElement(HeaderTitle, null, listingMeta.displayName), /*#__PURE__*/React.createElement(SortAndFiltersWrapper, null, /*#__PURE__*/React.createElement(SortStrip, null), /*#__PURE__*/React.createElement(FiltersButtonWrapper, null, /*#__PURE__*/React.createElement(FiltersButton, {
    data: filtersData,
    renderFilters: onClose => /*#__PURE__*/React.createElement(FiltersModal, {
      data: filtersData,
      isLoading: isFiltersQueryLoading,
      isFetching: isFiltersQueryFetching,
      onClose: onClose,
      totalResults: total,
      clearFilters: clearAllFilters,
      filtersCount: selectedFilters.length
    })
  }))))), /*#__PURE__*/React.createElement(SeoFilters, {
    hasSeoAgg: hasSeoAgg
  }, /*#__PURE__*/React.createElement(StickyBox, {
    offsetTop: 0
  }, /*#__PURE__*/React.createElement(Sidebar, {
    translateFilters: direction === 'up' && isTranslatable,
    withPromo: !hasActiveVoucher
  }, !isCategoryTreeLoading && categoryTree && /*#__PURE__*/React.createElement("div", {
    className: "d-none d-md-block"
  }, /*#__PURE__*/React.createElement(CategoryTree, {
    data: categoryTree,
    currentCategory: currentCategory
  })), !isCategoryTreeLoading && currentChildren && /*#__PURE__*/React.createElement("div", {
    className: "d-md-none"
  }, /*#__PURE__*/React.createElement(Aggregates, {
    data: currentChildren
  })), !isFiltersQueryLoading && !isCategoryTreeLoading && sizes && (currentChildren == null ? void 0 : (_currentChildren$ = currentChildren[0]) == null ? void 0 : _currentChildren$.items.length) === 0 && /*#__PURE__*/React.createElement("div", {
    className: "d-md-none"
  }, /*#__PURE__*/React.createElement(SizesList, {
    items: sizes.items
  }))))), /*#__PURE__*/React.createElement(LineItems, {
    hasSeoAgg: hasSeoAgg
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-none d-md-block"
  }, /*#__PURE__*/React.createElement(Breadcrumbs, {
    data: breadcrumbData,
    isLoading: isLoading,
    noPaddingLeft: true
  })), /*#__PURE__*/React.createElement(StickyHead, {
    translateFilters: direction === 'up' && isTranslatable,
    withPromo: !hasActiveVoucher
  }, /*#__PURE__*/React.createElement(HeaderWrapper, {
    removeMargin: removeMargin
  }, /*#__PURE__*/React.createElement(MobileBackButton, {
    last: lastBreadcrumb
  }), /*#__PURE__*/React.createElement(SearchMeta, {
    data: listingMeta,
    total: total
  }), isBreadcrumbLoading ? /*#__PURE__*/React.createElement(Placeholder, {
    width: "20rem"
  }) : /*#__PURE__*/React.createElement(HeaderTitle, null, listingMeta.displayName, " (", total, ")"), /*#__PURE__*/React.createElement(SortAndFiltersWrapper, null, /*#__PURE__*/React.createElement(SortStrip, null), /*#__PURE__*/React.createElement(FiltersButtonWrapper, null, /*#__PURE__*/React.createElement(FiltersButton, {
    data: filtersData,
    renderFilters: onClose => /*#__PURE__*/React.createElement(FiltersModal, {
      data: filtersData,
      isLoading: isFiltersQueryLoading,
      isFetching: isFiltersQueryFetching,
      onClose: onClose,
      totalResults: total,
      clearFilters: clearAllFilters,
      filtersCount: selectedFilters.length
    })
  })))), /*#__PURE__*/React.createElement("div", {
    className: "d-none d-md-block mb-1"
  }, !!filtersData && /*#__PURE__*/React.createElement(SelectedFilters, {
    data: filtersData
  }))), !Boolean(items == null ? void 0 : items.length) && /*#__PURE__*/React.createElement(NoResults, {
    isLoading: false,
    isCategory: true
  }), /*#__PURE__*/React.createElement(RenderInjectedContent, {
    componentList: contentUnderTitle
  }), /*#__PURE__*/React.createElement(ProductList, {
    hasSeoAgg: hasSeoAgg,
    items: items,
    contentInside: contentInside
  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Pagination, null)));
};
var StickyHead = styled.div.attrs({
  className: 'pl-md-0 d-none d-md-block'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background: ", ";\n  z-index: 99;\n  transition: transform ", ";\n  transform: translateY(\n    ", "\n  );\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, NAV_ANIMATION, props => props.translateFilters ? props.withPromo ? NAV_HEIGHT_WITH_VOUCHER : NAV_HEIGHT : '0');
var MobileStickyHead = styled.div.attrs({
  className: 'container-fluid pl-md-0 d-block d-md-none'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background: ", ";\n  z-index: 99;\n  transition: transform ", ";\n  transform: translateY(\n    ", "\n  );\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, NAV_ANIMATION, props => props.translateFilters ? props.withPromo ? NAV_HEIGHT_WITH_VOUCHER : NAV_HEIGHT : '0');
var HeaderWrapper = styled.div.attrs({
  className: 'd-flex justify-content-between align-items-center mb-3 mt-3 mt-md-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  min-height: 4.7rem;\n  flex-wrap: wrap;\n  ", ";\n  transition: margin ", ";\n  @media (max-width: ", ") {\n    flex-wrap: nowrap;\n  }\n"])), props => props.removeMargin && "\n    margin-bottom: 0 !important;\n  ", NAV_ANIMATION, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.sm.max;
});
var SortAndFiltersWrapper = styled.div.attrs({
  className: 'd-flex align-items-center pl-3 ml-auto mr-lg-3 mr-md-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var FiltersButtonWrapper = styled.div.attrs({
  className: 'ml-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var LineItemsWrapper = styled.div.attrs({
  className: 'd-flex flex-wrap'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 100%;\n"])));
var SeoFilters = styled.div.attrs({
  className: 'mr-md-5 '
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), props => props.isDisabled ? 0.4 : 1, props => props.isDisabled ? 'none' : 'all', (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
});
var LineItems = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  @media (min-width: ", ") {\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.min;
}, props => props.hasSeoAgg ? 'calc(100% - 26.4rem)' : '100%', props => props.hasSeoAgg ? 'calc(100% - 26.4rem)' : '100%');
var Sidebar = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  transition: transform ", ";\n  transform: translateY(\n    ", "\n  );\n"])), NAV_ANIMATION, props => props.translateFilters ? props.withPromo ? NAV_HEIGHT_WITH_VOUCHER : NAV_HEIGHT : '0');
var HeaderTitle = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    font-weight: 700;\n  }\n  @media (min-width: ", ") {\n    font-size: 2rem;\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.sm.max;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map