exports.id = 306;
exports.ids = [306];
exports.modules = {

/***/ 3995:
/***/ ((module) => {

// Exports
module.exports = {
	"center": "ProductList_center__XCDxl",
	"paper": "ProductList_paper__U_Ey9",
	"styledScrollBarList": "ProductList_styledScrollBarList__l9Ymc",
	"page": "ProductList_page__Xo3HY",
	"pageHeader": "ProductList_pageHeader__Pm4Go",
	"pageContent": "ProductList_pageContent__N7w_P",
	"pageTitle": "ProductList_pageTitle__Mh_8C",
	"customIcon": "ProductList_customIcon__GuSSg",
	"container": "ProductList_container__9vOn5",
	"listWrapper": "ProductList_listWrapper__W4ovM",
	"listHeader": "ProductList_listHeader__zE4fw",
	"ProductList": "ProductList_ProductList__4kXmb",
	"listItem": "ProductList_listItem__55k12",
	"list": "ProductList_list__n7Kr0",
	"listContent": "ProductList_listContent__GI5iU",
	"itemMain": "ProductList_itemMain__Q5d2b",
	"itemImage": "ProductList_itemImage__kdtBl",
	"itemMainInfo": "ProductList_itemMainInfo__OxxoL",
	"itemTitle": "ProductList_itemTitle__JXsXe",
	"ellipsis": "ProductList_ellipsis__nxay0",
	"listItemActions": "ProductList_listItemActions__yVkSu",
	"priceBlock": "ProductList_priceBlock__d6bxy",
	"price": "ProductList_price___f6TS",
	"oldPrice": "ProductList_oldPrice__UK2b_",
	"filter": "ProductList_filter__DlOm5",
	"pageActions": "ProductList_pageActions__fjTVI",
	"filterDrawer": "ProductList_filterDrawer__46S4b",
	"filterHeader": "ProductList_filterHeader__djg_3",
	"attributeFilterButton": "ProductList_attributeFilterButton__TsBeu"
};


/***/ }),

/***/ 7306:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ ProductListPage)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2322);
/* harmony import */ var _cromwell_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1815);
/* harmony import */ var _cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4536);
/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7915);
/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5692);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_mui_material__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _cromwell_plugin_product_filter_src_frontend_components_Filter__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8794);
/* harmony import */ var _components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(256);
/* harmony import */ var _constants_PageInfos__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(379);
/* harmony import */ var _helpers_customEntities__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(4531);
/* harmony import */ var _ProductList_module_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(3995);
/* harmony import */ var _ProductList_module_scss__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_ProductList_module_scss__WEBPACK_IMPORTED_MODULE_11__);
/* harmony import */ var _helpers_forceUpdate__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(8673);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_cromwell_plugin_product_filter_src_frontend_components_Filter__WEBPACK_IMPORTED_MODULE_6__, _components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_7__, _helpers_customEntities__WEBPACK_IMPORTED_MODULE_9__]);
([_cromwell_plugin_product_filter_src_frontend_components_Filter__WEBPACK_IMPORTED_MODULE_6__, _components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_7__, _helpers_customEntities__WEBPACK_IMPORTED_MODULE_9__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);












function ProductListPage() {
    const client = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.getGraphQLClient)();
    const [showFilter, setShowFilter] = (0,react__WEBPACK_IMPORTED_MODULE_5__.useState)(false);
    const filterInstRef = (0,react__WEBPACK_IMPORTED_MODULE_5__.useRef)(null);
    const [attributes, setAttributes] = (0,react__WEBPACK_IMPORTED_MODULE_5__.useState)(null);
    const productsRef = (0,react__WEBPACK_IMPORTED_MODULE_5__.useRef)(null);
    const filterInputRef = (0,react__WEBPACK_IMPORTED_MODULE_5__.useRef)({});
    const initialFilterRef = (0,react__WEBPACK_IMPORTED_MODULE_5__.useRef)({});
    const entityListPageRef = (0,react__WEBPACK_IMPORTED_MODULE_5__.useRef)(null);
    const forceUpdate = (0,_helpers_forceUpdate__WEBPACK_IMPORTED_MODULE_10__/* .useForceUpdate */ .N)();
    (0,react__WEBPACK_IMPORTED_MODULE_5__.useEffect)(()=>{
        init();
        if (filterInstRef.current && initialFilterRef.current) {
            const filter = initialFilterRef.current;
            if (filter.attributes || filter.minPrice || filter.maxPrice || filter.nameSearch) {
                filterInstRef.current.setFilter(filter);
                filterInputRef.current = filter;
                entityListPageRef.current?.resetList?.();
            }
        }
    }, []);
    const init = async ()=>{
        const attributes = await client.getAttributes({
            pagedParams: {
                pageSize: 1000
            }
        });
        setAttributes(attributes?.elements);
    };
    const handleToggleFilter = ()=>{
        setShowFilter((prev)=>!prev);
    };
    const onFilterMount = ()=>{
        filterInstRef.current?.setFilterMeta(productsRef.current?.filterMeta);
    };
    const onFilterChange = (params)=>{
        const filter = filterInputRef.current ?? {};
        filter.attributes = params.attributes;
        filter.minPrice = params.minPrice;
        filter.maxPrice = params.maxPrice;
        filter.nameSearch = params.nameSearch;
        filter.categoryId = params.categoryId;
        entityListPageRef.current?.resetList?.();
        forceUpdate();
    };
    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
        children: [
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_entity_entityTable_EntityTable__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
                entityCategory: _cromwell_core__WEBPACK_IMPORTED_MODULE_1__.EDBEntity.Product,
                entityListRoute: _constants_PageInfos__WEBPACK_IMPORTED_MODULE_8__/* .productListInfo.route */ .e8.route,
                entityBaseRoute: _constants_PageInfos__WEBPACK_IMPORTED_MODULE_8__/* .productPageInfo.baseRoute */ .On.baseRoute,
                listLabel: "Products",
                entityLabel: "Product",
                nameProperty: "name",
                getMany: async (options)=>{
                    if (!options.filterParams) options.filterParams = {};
                    options.filterParams.minPrice = filterInputRef.current?.minPrice;
                    options.filterParams.maxPrice = filterInputRef.current?.maxPrice;
                    options.filterParams.attributes = filterInputRef.current?.attributes;
                    options.filterParams.nameSearch = filterInputRef.current?.nameSearch;
                    const data = await client.getProducts(options);
                    filterInstRef.current?.setFilterMeta(data?.filterMeta);
                    productsRef.current = data;
                    return data;
                },
                deleteOne: client.deleteProduct,
                deleteMany: client.deleteManyProducts,
                getPageListInstance: (inst)=>{
                    entityListPageRef.current = inst;
                    initialFilterRef.current = Object.assign({}, inst.getFilterInput());
                },
                onClearAllFilters: ()=>{
                    filterInstRef.current?.setFilter({});
                    filterInputRef.current = {};
                },
                isFilterActive: ()=>{
                    const filter = filterInputRef.current;
                    return !!(filter.nameSearch || filter.attributes || filter.maxPrice || filter.minPrice);
                },
                columns: [
                    {
                        name: "mainImage",
                        label: "Image",
                        type: "Image",
                        visible: true
                    },
                    {
                        name: "name",
                        label: "Name",
                        type: "Simple text",
                        visible: true,
                        minWidth: "25%"
                    },
                    {
                        name: "sku",
                        label: "SKU",
                        type: "Simple text",
                        visible: true
                    },
                    {
                        name: "price",
                        label: "Price",
                        type: "Currency",
                        visible: true
                    },
                    {
                        name: "oldPrice",
                        label: "Old Price",
                        type: "Currency",
                        visible: false
                    },
                    {
                        name: "stockStatus",
                        label: "Stock status",
                        type: "Simple text",
                        visible: true,
                        exactSearch: true,
                        searchOptions: [
                            {
                                value: "In stock",
                                label: "In stock"
                            },
                            {
                                value: "Out of stock",
                                label: "Out of stock"
                            },
                            {
                                value: "On backorder",
                                label: "On backorder"
                            }
                        ]
                    },
                    ..._helpers_customEntities__WEBPACK_IMPORTED_MODULE_9__/* .baseEntityColumns.map */ .xz.map((col)=>{
                        if (col.name === "createDate") return {
                            ...col,
                            visible: true
                        };
                        return {
                            ...col,
                            visible: false
                        };
                    })
                ],
                customElements: {
                    getHeaderLeftActions: ()=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_4__.Tooltip, {
                                title: "Attribute filter",
                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
                                    className: (_ProductList_module_scss__WEBPACK_IMPORTED_MODULE_11___default().attributeFilterButton),
                                    onClick: handleToggleFilter,
                                    "aria-label": "show filter",
                                    children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_icons_material__WEBPACK_IMPORTED_MODULE_3__.FilterList, {})
                                })
                            })
                        })
                }
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_4__.Drawer, {
                classes: {
                    paper: (_ProductList_module_scss__WEBPACK_IMPORTED_MODULE_11___default().filterDrawer)
                },
                variant: "persistent",
                anchor: "left",
                open: showFilter,
                onClose: ()=>setShowFilter(false),
                children: [
                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                        className: (_ProductList_module_scss__WEBPACK_IMPORTED_MODULE_11___default().filterHeader),
                        children: [
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h3", {
                                children: "Filter"
                            }),
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_4__.Tooltip, {
                                title: "Close",
                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
                                    onClick: handleToggleFilter,
                                    "aria-label": "close filter",
                                    children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_icons_material__WEBPACK_IMPORTED_MODULE_3__.Close, {})
                                })
                            })
                        ]
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_cromwell_plugin_product_filter_src_frontend_components_Filter__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
                        instanceSettings: {
                            disableMobile: true,
                            onChange: onFilterChange,
                            getInstance: (inst)=>{
                                filterInstRef.current = inst;
                            },
                            onMount: onFilterMount
                        },
                        data: {
                            attributes
                        }
                    })
                ]
            })
        ]
    });
}

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

/***/ 9471:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "h": () => (/* binding */ defaultSettings)
/* harmony export */ });
const defaultSettings = {
    listId: "Category_ProductList",
    mobileIconPosition: {
        top: 100,
        left: 10
    },
    collapsedByDefault: false,
    mobileCollapsedByDefault: false,
    mobileBreakpoint: 600
};


/***/ }),

/***/ 8794:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* unused harmony export ProductFilter */
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2322);
/* harmony import */ var _cromwell_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1815);
/* harmony import */ var _cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4536);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5692);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_mui_material__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _mui_styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9484);
/* harmony import */ var _mui_styles__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_mui_styles__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8103);
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(clsx__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7261);
/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9471);
/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1945);
/* harmony import */ var _utils_queries__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(9666);
/* harmony import */ var _Slider__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(9233);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([throttle_debounce__WEBPACK_IMPORTED_MODULE_7__]);
throttle_debounce__WEBPACK_IMPORTED_MODULE_7__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];












const ExpandMoreIcon = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.iconFromPath)(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("path", {
    d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
}));
const FilterListIcon = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.iconFromPath)(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("path", {
    d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
}));
const CloseIcon = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.iconFromPath)(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("path", {
    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
}));
class ProductFilter extends (react__WEBPACK_IMPORTED_MODULE_6___default().Component) {
    constructor(props){
        super(props);
        this.priceRange = [];
        this.search = "";
        this.collapsedByDefault = false;
        this.checkedAttrs = {};
        /** Cached fetched categories { [slug]: category } */ this.cachedCategories = {};
        this.isFilterApplied = false;
        this.lastPageSlug = null;
        this.lastAppliedFilterStr = null;
        this.instanceId = (0,_cromwell_core__WEBPACK_IMPORTED_MODULE_1__.getRandStr)(12);
        this.fullInstanceId = `@cromwell/plugin-product-filter__${this.instanceId}`;
        this.searchInputId = `${this.instanceId}_search`;
        this.routeChangeComplete = ()=>{
            const slug = this.getCurrentCategorySlug();
            if (slug && this.lastPageSlug !== slug) {
                this.lastPageSlug = slug;
                this.init();
            }
        };
        this.cacheKey = `@cromwell/plugin-product-filter__initialDataStore`;
        this.handleSetAttribute = (key, checks)=>{
            this.checkedAttrs = JSON.parse(JSON.stringify(this.checkedAttrs));
            this.checkedAttrs[key] = checks;
            this.forceUpdate();
            this.applyFilter();
        };
        this.setFilterMeta = (filterMeta)=>{
            if (filterMeta?.minPrice !== undefined && filterMeta?.minPrice !== null) this.setState({
                minPrice: filterMeta.minPrice
            });
            if (filterMeta?.maxPrice) this.setState({
                maxPrice: filterMeta.maxPrice
            });
        };
        this.getFilterParams = ()=>{
            const filter = {
                attributes: Object.keys(this.checkedAttrs).map((key)=>({
                        key,
                        values: this.checkedAttrs[key]
                    })).filter((attr)=>attr.key && attr.values?.length),
                minPrice: this.priceRange[0],
                maxPrice: this.priceRange[1],
                nameSearch: this.search
            };
            if (!filter.attributes?.length) {
                delete filter.attributes;
            }
            if (typeof filter.minPrice !== "number") {
                delete filter.minPrice;
            }
            if (typeof filter.maxPrice !== "number") {
                delete filter.maxPrice;
            }
            if (!filter.nameSearch) {
                delete filter.nameSearch;
            }
            return filter;
        };
        this.applyFilter = ()=>{
            const filterParams = this.getFilterParams();
            const { instanceSettings  } = this.props;
            if (Object.keys(filterParams).length === 0) {
                this.isFilterApplied = false;
            } else {
                this.isFilterApplied = true;
            }
            const filterParamsStr = JSON.stringify(filterParams);
            if (this.lastAppliedFilterStr !== filterParamsStr) {
                this.lastAppliedFilterStr = filterParamsStr;
                instanceSettings?.onChange?.(filterParams);
                this.applyFilterCList();
                if (!this.isFilterApplied) {
                    // Set default meta
                    const filterMeta = this.initialData?.filterMeta;
                    this.setState({
                        minPrice: filterMeta?.minPrice ?? 0,
                        maxPrice: filterMeta?.maxPrice ?? 0
                    });
                }
            }
        };
        this.registerFilterLoader = ()=>{
            const { list  } = this.getCList();
            if (!list) return;
            list.registerLoaderGetter(this.fullInstanceId, ()=>{
                if (!this.isFilterApplied) return;
                return {
                    priority: 2,
                    loader: async ({ pagedParams  })=>{
                        // const timestamp = Date.now();
                        const productCategory = await this.getCurrentCategory();
                        const filterParams = this.getFilterParams();
                        const filtered = await (0,_utils_queries__WEBPACK_IMPORTED_MODULE_10__/* .getFilteredProducts */ .XS)({
                            pagedParams,
                            filterParams,
                            categoryId: productCategory?.id
                        });
                        this.setFilterMeta(filtered?.filterMeta);
                        // const timestamp2 = Date.now();
                        // console.log('ProductFilterResolver::getFilteredProducts time elapsed: ' + (timestamp2 - timestamp) + 'ms');
                        return filtered;
                    }
                };
            });
        };
        this.onPriceRangeChange = (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_7__.debounce)(500, (newValue)=>{
            this.priceRange = [
                ...newValue
            ];
            if (this.priceRange[0] === this.state.minPrice) {
                this.priceRange[0] = undefined;
            }
            if (this.priceRange[1] === this.state.maxPrice) {
                this.priceRange[1] = undefined;
            }
            this.applyFilter();
        });
        this.onSearchChange = (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_7__.debounce)(500, (newValue)=>{
            this.search = newValue;
            this.applyFilter();
        });
        this.handleMobileOpen = ()=>{
            this.setState({
                isMobileOpen: true
            });
        };
        this.handleMobileClose = ()=>{
            this.setState({
                isMobileOpen: false
            });
        };
        this.handleCategoryClick = (category)=>()=>{
                const skip = this.props?.instanceSettings?.onCategoryClick?.(category);
                if (skip) return;
                if (!category?.slug && !category?.id || !this.props.router) return;
                const url = (0,_cromwell_core__WEBPACK_IMPORTED_MODULE_1__.resolvePageRoute)("category", {
                    slug: category.slug ?? category.id + ""
                });
                this.props.router?.push(url);
            };
        this.setFilter = (filterParams)=>{
            this.priceRange[0] = filterParams.minPrice;
            this.priceRange[1] = filterParams.maxPrice;
            this.search = filterParams.nameSearch || "";
            const searchInput = document.getElementById(this.searchInputId);
            if (searchInput) {
                searchInput.value = filterParams.nameSearch ?? "";
            }
            this.checkedAttrs = Object.assign({}, ...filterParams.attributes?.map((attr)=>{
                return {
                    [attr.key]: attr.values
                };
            }) ?? []);
            this.forceUpdate();
        };
        this.getFilterItem = (props)=>{
            const { collapsedItems  } = this.state;
            if (collapsedItems[props.key] === undefined) {
                collapsedItems[props.key] = this.collapsedByDefault;
            }
            const isExpanded = !collapsedItems[props.key];
            return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Card, {
                className: "productFilter_card",
                children: [
                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                        className: "productFilter_headerWrapper",
                        onClick: ()=>this.setState((prev)=>({
                                    collapsedItems: {
                                        ...prev.collapsedItems,
                                        [props.key]: !prev.collapsedItems[props.key]
                                    }
                                })),
                        children: [
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Typography, {
                                gutterBottom: true,
                                style: {
                                    fontSize: "14px",
                                    margin: "0 0 0 15px"
                                },
                                children: props.title
                            }),
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
                                className: clsx__WEBPACK_IMPORTED_MODULE_5___default()("productFilter_expand", {
                                    productFilter_expandOpen: isExpanded
                                }),
                                "aria-expanded": isExpanded,
                                "aria-label": `Toggle ${props.title} filter visibility`,
                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(ExpandMoreIcon, {})
                            })
                        ]
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Collapse, {
                        in: isExpanded,
                        timeout: "auto",
                        unmountOnExit: true,
                        children: props.content
                    })
                ]
            });
        };
        this.state = {
            collapsedItems: {},
            minPrice: 0,
            maxPrice: 0,
            isMobileOpen: false,
            isLoading: false
        };
        this.props?.instanceSettings?.getInstance?.(this);
        this.props.router?.events?.on("routeChangeComplete", this.routeChangeComplete);
    }
    componentDidMount() {
        this.props?.instanceSettings?.onMount?.(this);
        this.init();
    }
    componentWillUnmount() {
        this.isFilterApplied = false;
        this.props.router?.events?.off("routeChangeComplete", this.routeChangeComplete);
        const { list  } = this.getCList();
        if (list) {
            list.unregisterLoaderGetter(this.fullInstanceId);
        }
    }
    async init() {
        this.isFilterApplied = false;
        this.checkedAttrs = {};
        this.priceRange = [];
        this.search = "";
        this.lastAppliedFilterStr = null;
        this.setState({
            isLoading: true
        });
        const slug = this.getCurrentCategorySlug();
        this.cachedCategories[slug] = new Promise((resolve)=>{
            (async ()=>{
                try {
                    this.initialData = await this.getInitialData(slug);
                } catch (error) {
                    console.error(error);
                }
                resolve(this.initialData?.productCategory);
            })();
        });
        const result = await this.cachedCategories[slug];
        if (result) {
            this.cachedCategories[slug] = result;
        } else {
            delete this.cachedCategories[slug];
        }
        const filterMeta = this.initialData?.filterMeta;
        this.setState({
            minPrice: filterMeta?.minPrice ?? 0,
            maxPrice: filterMeta?.maxPrice ?? 0,
            isLoading: false
        });
    }
    getInitialDataCachedStore() {
        const str = window.sessionStorage.getItem(this.cacheKey);
        if (str) {
            try {
                const data = JSON.parse(str);
                return data;
            } catch (error) {
            //
            }
        }
        return {};
    }
    saveInitialDataIntoCache(data, slug) {
        if (!slug) return;
        const store = this.getInitialDataCachedStore();
        store[slug] = data;
        window.sessionStorage.setItem(this.cacheKey, JSON.stringify(store));
    }
    getInitialDataCached(slug) {
        const data = this.getInitialDataCachedStore();
        if (data?.[slug]) {
            return data?.[slug];
        }
    }
    async getInitialData(slug) {
        // const timestamp = Date.now();
        if (this.props.instanceSettings?.cacheSessionData && slug) {
            const cached = this.getInitialDataCached(slug);
            if (cached) {
                return cached;
            }
        }
        const [{ productCategory , filterMeta  }, attributes] = await Promise.all([
            (0,_utils_queries__WEBPACK_IMPORTED_MODULE_10__/* .getCategoryBySlug */ .fj)(slug).then(async (productCategory)=>{
                let filterMeta;
                if (productCategory?.id) {
                    const result = await (0,_utils_queries__WEBPACK_IMPORTED_MODULE_10__/* .getFilteredProducts */ .XS)({
                        // Just to get filterMeta to show min/max price on the filter, products are not needed
                        pagedParams: {
                            pageSize: 1
                        },
                        categoryId: productCategory.id
                    });
                    filterMeta = result?.filterMeta;
                }
                return {
                    productCategory,
                    filterMeta
                };
            }),
            (0,_utils_queries__WEBPACK_IMPORTED_MODULE_10__/* .getAttributes */ .u9)()
        ]);
        // const timestamp2 = Date.now();
        // console.log('ProductFilter::getStaticProps time elapsed: ' + (timestamp2 - timestamp) + 'ms');
        const data = {
            productCategory,
            attributes,
            filterMeta
        };
        if (this.props.instanceSettings?.cacheSessionData && slug) {
            this.saveInitialDataIntoCache(data, slug);
        }
        return data;
    }
    getProductListId() {
        const { instanceSettings  } = this.props;
        const { pluginSettings  } = this.props.data ?? {};
        const productListId = instanceSettings?.listId ?? pluginSettings?.listId;
        return productListId;
    }
    getCurrentCategorySlug() {
        const slug = this.props.router?.query?.slug || (this.props.data?.slug);
        return slug;
    }
    async getCurrentCategory() {
        const slug = this.getCurrentCategorySlug();
        if (this.cachedCategories[slug]) return this.cachedCategories[slug];
        if (slug === this.props.router?.query?.slug) {
            // category may not load yet. await and check promise
            await new Promise((res)=>setTimeout(res, 100));
            return await this.cachedCategories[slug];
        }
    }
    getCList() {
        const listId = this.getProductListId();
        if (!listId) return {};
        const list = (0,_cromwell_core__WEBPACK_IMPORTED_MODULE_1__.getBlockInstance)(listId)?.getContentInstance();
        return {
            list,
            listId
        };
    }
    applyFilterCList() {
        const { list  } = this.getCList();
        if (!list) return;
        this.registerFilterLoader();
        list.updateData();
    }
    render() {
        const { instanceSettings  } = this.props;
        const { pluginSettings  } = this.props.data ?? {};
        const { attributes , productCategory  } = this.initialData ?? {};
        const { isMobileOpen , minPrice , maxPrice , collapsedItems , isLoading  } = this.state;
        instanceSettings?.getInstance?.(this);
        const isMobile = !instanceSettings?.disableMobile && this.props.isMobile;
        const pcCollapsedByDefault = pluginSettings?.collapsedByDefault ?? _constants__WEBPACK_IMPORTED_MODULE_8__/* .defaultSettings.collapsedByDefault */ .h.collapsedByDefault;
        const mobileCollapsedByDefault = pluginSettings?.mobileCollapsedByDefault ?? _constants__WEBPACK_IMPORTED_MODULE_8__/* .defaultSettings.mobileCollapsedByDefault */ .h.mobileCollapsedByDefault;
        const _collapsedByDefault = isMobile ? mobileCollapsedByDefault : pcCollapsedByDefault;
        if (this.collapsedByDefault !== _collapsedByDefault) {
            this.collapsedByDefault = _collapsedByDefault;
            this.setState({
                collapsedItems: {}
            });
        }
        let filterContent = /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
            style: {
                position: "relative"
            },
            children: [
                isLoading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                    style: {
                        position: "absolute",
                        width: "100%",
                        height: "100%",
                        zIndex: 11,
                        backgroundColor: "rgba(255,255,255,0.4)",
                        borderRadius: "8px",
                        backdropFilter: "blur(3px)",
                        WebkitBackdropFilter: "blur(3px)"
                    },
                    children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.LoadBox, {
                        size: 60
                    })
                }),
                isMobile && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                    className: "productFilter_mobileHeader",
                    children: [
                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("p", {
                            children: "Filter"
                        }),
                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
                            "aria-label": "Close filter",
                            className: "productFilter_mobileCloseBtn",
                            onClick: this.handleMobileClose,
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(CloseIcon, {})
                        })
                    ]
                }),
                this.getFilterItem({
                    title: "Search",
                    key: "search",
                    content: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.TextField, {
                        style: {
                            padding: "0 15px 15px 15px",
                            width: "100%"
                        },
                        id: this.searchInputId,
                        placeholder: "type to search...",
                        variant: "standard",
                        onChange: (e)=>this.onSearchChange(e.target.value)
                    })
                }),
                productCategory && !!(productCategory.parent || productCategory.children?.length) && this.getFilterItem({
                    title: "Categories",
                    key: "categories",
                    content: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                        className: clsx__WEBPACK_IMPORTED_MODULE_5___default()("productFilter_categoryBox", "productFilter_styledScrollBar", "productFilter_list"),
                        children: [
                            productCategory.parent && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Chip, {
                                className: "productFilter_category",
                                label: productCategory.parent.name,
                                onClick: this.handleCategoryClick(productCategory.parent)
                            }),
                            productCategory && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Chip, {
                                className: "productFilter_category",
                                variant: "outlined",
                                disabled: true,
                                style: {
                                    marginLeft: productCategory.parent ? "15px" : ""
                                },
                                label: productCategory.name,
                                onClick: this.handleCategoryClick(productCategory)
                            }),
                            !!productCategory.children?.length && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                                children: productCategory.children.map((child)=>/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Chip, {
                                        className: "productFilter_category",
                                        style: {
                                            marginLeft: (productCategory?.parent ? 15 : 0) + 15 + "px"
                                        },
                                        label: child.name,
                                        onClick: this.handleCategoryClick(child)
                                    }, child.id))
                            })
                        ]
                    })
                }),
                !!maxPrice && minPrice !== maxPrice && this.getFilterItem({
                    title: "Price",
                    key: "price",
                    content: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_Slider__WEBPACK_IMPORTED_MODULE_11__/* .Slider */ .i, {
                        onChange: this.onPriceRangeChange,
                        minPrice: minPrice,
                        maxPrice: maxPrice,
                        priceRange: [
                            this.priceRange[0] ?? minPrice,
                            this.priceRange[1] ?? maxPrice
                        ]
                    })
                }),
                attributes && attributes.map((attr)=>{
                    if (!attr.key || !attr.values) return null;
                    if (!(attr.type === "checkbox" || attr.type === "radio")) return null;
                    const checked = this.checkedAttrs[attr.key];
                    const numberOfChecked = ()=>checked ? checked.length : 0;
                    const handleToggleAll = ()=>{
                        if (attr.key && attr.values && attr.values?.length !== 0) {
                            if (numberOfChecked() === attr.values?.length) {
                                this.handleSetAttribute(attr.key, []);
                            } else {
                                this.handleSetAttribute(attr.key, attr.values.map((v)=>v.value));
                            }
                        }
                    };
                    if (collapsedItems[attr.key] === undefined) {
                        collapsedItems[attr.key] = this.collapsedByDefault;
                    }
                    const isExpanded = !collapsedItems[attr.key];
                    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Card, {
                        className: "productFilter_card",
                        children: [
                            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                                className: "productFilter_headerWrapper",
                                children: [
                                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.CardHeader, {
                                        className: "productFilter_cardHeader",
                                        avatar: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Checkbox, {
                                            color: "primary",
                                            onClick: handleToggleAll,
                                            checked: numberOfChecked() === attr.values.length && attr.values.length !== 0,
                                            indeterminate: numberOfChecked() !== attr.values.length && numberOfChecked() !== 0,
                                            disabled: attr.values.length === 0,
                                            inputProps: {
                                                "aria-label": "all items selected"
                                            }
                                        }),
                                        title: attr.key,
                                        subheader: `${numberOfChecked()}/${attr.values.length} selected`
                                    }),
                                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
                                        onClick: ()=>this.setState((prev)=>({
                                                    collapsedItems: {
                                                        ...prev.collapsedItems,
                                                        [attr.key]: !prev.collapsedItems[attr.key]
                                                    }
                                                })),
                                        className: clsx__WEBPACK_IMPORTED_MODULE_5___default()("productFilter_expand", {
                                            productFilter_expandOpen: isExpanded
                                        }),
                                        "aria-label": "Toggle filter visibility",
                                        "aria-expanded": isExpanded,
                                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(ExpandMoreIcon, {})
                                    })
                                ]
                            }),
                            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Collapse, {
                                in: isExpanded,
                                timeout: "auto",
                                unmountOnExit: true,
                                children: [
                                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Divider, {}),
                                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_3__.List, {
                                        className: clsx__WEBPACK_IMPORTED_MODULE_5___default()("productFilter_list", "productFilter_styledScrollBar"),
                                        dense: true,
                                        component: "div",
                                        role: "list",
                                        children: [
                                            attr.values.map((attrValue)=>{
                                                const value = attrValue.value;
                                                const labelId = `attribute-list-${attr.key}-${value}-label`;
                                                return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_3__.ListItem, {
                                                    role: "listitem",
                                                    button: true,
                                                    onClick: ()=>{
                                                        const newChecked = checked ? [
                                                            ...checked
                                                        ] : [];
                                                        const currentIndex = newChecked.indexOf(value);
                                                        if (currentIndex === -1) {
                                                            newChecked.push(value);
                                                        } else {
                                                            newChecked.splice(currentIndex, 1);
                                                        }
                                                        this.handleSetAttribute(attr.key, newChecked);
                                                    },
                                                    children: [
                                                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.ListItemIcon, {
                                                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.Checkbox, {
                                                                color: "primary",
                                                                checked: checked ? checked.indexOf(value) !== -1 : false,
                                                                tabIndex: -1,
                                                                disableRipple: true,
                                                                inputProps: {
                                                                    "aria-labelledby": labelId
                                                                }
                                                            })
                                                        }),
                                                        attrValue.icon && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                                                            style: {
                                                                backgroundImage: `url(${attrValue.icon}`
                                                            },
                                                            className: "productFilter_attrValueIcon"
                                                        }),
                                                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.ListItemText, {
                                                            id: labelId,
                                                            primary: value
                                                        })
                                                    ]
                                                }, value);
                                            }),
                                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.ListItem, {})
                                        ]
                                    })
                                ]
                            })
                        ]
                    }, attr.key);
                })
            ]
        });
        if (isMobile) {
            const onOpen = ()=>{};
            const mobileIconPosition = pluginSettings?.mobileIconPosition ?? _constants__WEBPACK_IMPORTED_MODULE_8__/* .defaultSettings.mobileIconPosition */ .h.mobileIconPosition;
            filterContent = /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
                        "aria-label": "Open product filter",
                        className: "productFilter_mobileOpenBtn",
                        style: {
                            top: mobileIconPosition.top + "px",
                            left: mobileIconPosition.left + "px"
                        },
                        onClick: this.handleMobileOpen,
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(FilterListIcon, {})
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_mui_material__WEBPACK_IMPORTED_MODULE_3__.SwipeableDrawer, {
                        open: isMobileOpen,
                        onClose: this.handleMobileClose,
                        onOpen: onOpen,
                        classes: {
                            paper: "productFilter_styledScrollBar"
                        },
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                            className: "productFilter_drawer",
                            children: filterContent
                        })
                    })
                ]
            });
        }
        return filterContent;
    }
}
let HocComp = (props)=>{
    const isMobile = (0,_mui_material__WEBPACK_IMPORTED_MODULE_3__.useMediaQuery)(`(max-width:${props.data?.pluginSettings?.mobileBreakpoint || 600}px)`);
    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(ProductFilter, {
        ...props,
        isMobile: isMobile
    });
};
HocComp = (0,_mui_styles__WEBPACK_IMPORTED_MODULE_4__.withStyles)(_styles__WEBPACK_IMPORTED_MODULE_9__/* .styles */ .W)(HocComp);
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HocComp);

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

/***/ 9233:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "i": () => (/* binding */ Slider)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2322);
/* harmony import */ var _cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4536);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5692);
/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_mui_material__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1945);





const getPriceText = (value)=>{
    return (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_1__.getCStore)().getPriceWithCurrency(value);
};
function useForceUpdate() {
    const [, setValue] = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0);
    return ()=>setValue((value)=>++value);
}
const StyledSlider = (0,_styles__WEBPACK_IMPORTED_MODULE_4__/* .IOSSliderStyles */ .k)(_mui_material__WEBPACK_IMPORTED_MODULE_2__.Slider);
const Slider = (props)=>{
    const forceUpdate = useForceUpdate();
    const _minPrice = react__WEBPACK_IMPORTED_MODULE_3___default().useRef(props.minPrice);
    const _maxPrice = react__WEBPACK_IMPORTED_MODULE_3___default().useRef(props.maxPrice);
    const lastParentPriceRange = react__WEBPACK_IMPORTED_MODULE_3___default().useRef(props.priceRange);
    const priceRange = react__WEBPACK_IMPORTED_MODULE_3___default().useRef([
        props.minPrice,
        props.maxPrice
    ]);
    if (props.minPrice !== _minPrice.current) {
        priceRange.current[0] = props.minPrice;
        _minPrice.current = props.minPrice;
    }
    if (props.maxPrice !== _maxPrice.current) {
        priceRange.current[1] = props.maxPrice;
        _maxPrice.current = props.maxPrice;
    }
    if (props.priceRange[0] !== lastParentPriceRange.current[0] || props.priceRange[1] !== lastParentPriceRange.current[1]) {
        priceRange.current = [
            ...props.priceRange
        ];
        lastParentPriceRange.current = [
            ...props.priceRange
        ];
    }
    const handlePriceRangeChange = (event, newValue)=>{
        priceRange.current = newValue;
        props.onChange(newValue);
        forceUpdate();
    };
    const marks = [
        {
            value: props.minPrice,
            label: getPriceText(props.minPrice)
        }
    ];
    if (props.minPrice !== props.maxPrice) {
        marks.push({
            value: props.maxPrice,
            label: getPriceText(props.maxPrice)
        });
    }
    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
        style: {
            padding: "0 25px"
        },
        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(StyledSlider, {
            value: priceRange.current,
            onChange: handlePriceRangeChange,
            valueLabelDisplay: "auto",
            "aria-labelledby": "range-slider",
            getAriaValueText: getPriceText,
            min: props.minPrice,
            max: props.maxPrice,
            marks: marks
        })
    });
};


/***/ }),

/***/ 1945:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "W": () => (/* binding */ styles),
/* harmony export */   "k": () => (/* binding */ IOSSliderStyles)
/* harmony export */ });
/* harmony import */ var _mui_styles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9484);
/* harmony import */ var _mui_styles__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_mui_styles__WEBPACK_IMPORTED_MODULE_0__);

const styles = {
    "@global": {
        ".productFilter_card": {
            margin: "15px 0",
            // boxShadow: '0 3px 6px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0px rgba(0, 0, 0, 0.05)',
            boxShadow: "none",
            backgroundColor: "transparent",
            borderRadius: "5px"
        },
        ".productFilter_root": {
            margin: "auto"
        },
        ".productFilter_cardHeader": {
            padding: "15px"
        },
        ".productFilter_list": {
            maxHeight: 230,
            backgroundColor: "transparent",
            overflow: "auto"
        },
        ".productFilter_button": {
            margin: "10px"
        },
        ".productFilter_attrValueIcon": {
            width: "30px",
            height: "30px",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
            backgroundSize: "contain",
            marginRight: "10px"
        },
        ".productFilter_expand": {
            transform: "rotate(0deg)",
            marginLeft: "auto",
            transition: "0.3sz"
        },
        ".productFilter_expandOpen": {
            transform: "rotate(180deg)"
        },
        ".productFilter_headerWrapper": {
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between"
        },
        ".productFilter_paper": {
            boxShadow: "0 3px 6px 0 rgba(0, 0, 0, 0.04), 0 0 10px 3px rgba(0, 0, 0, 0.05)",
            backgroundColor: "transparent",
            borderRadius: "5px"
        },
        ".productFilter_mobileOpenBtn": {
            position: "fixed",
            top: "100px",
            left: "10px",
            boxShadow: "0 3px 6px 0 rgba(0, 0, 0, 0.04), 0 0 10px 3px rgba(0, 0, 0, 0.05)",
            backgroundColor: "#fff",
            zIndex: 11,
            color: "#111"
        },
        ".productFilter_drawer": {
            minWidth: "300px",
            backgroundColor: "#fff",
            height: "100vh",
            padding: "10px"
        },
        ".productFilter_mobileCloseBtn": {
            color: "#111"
        },
        ".productFilter_mobileHeader": {
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            fontWeight: 500,
            paddingLeft: "10px",
            fontSize: "18px"
        },
        ".productFilter_styledScrollBar": {
            "&::-webkit-scrollbar": {
                width: "0.5em",
                height: "0.5em"
            },
            "&::-webkit-scrollbar-track": {
                backgroundColor: "rgba($color: #000000, $alpha: 0.1)",
                borderRadius: "30px"
            },
            "&::-webkit-scrollbar-thumb": {
                backgroundColor: "#7f7f7f",
                outline: "none",
                borderRadius: "30px"
            }
        },
        ".productFilter_categoryBox": {
            display: "flex",
            flexDirection: "column",
            padding: "5px 15px",
            alignItems: "flex-start"
        },
        ".productFilter_category": {
            marginBottom: "10px",
            minHeight: "30px"
        }
    }
};
const iOSBoxShadow = "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)";
const IOSSliderStyles = (0,_mui_styles__WEBPACK_IMPORTED_MODULE_0__.withStyles)((theme)=>({
        root: {
            color: theme?.palette?.primary?.main ?? "#222",
            height: 2,
            padding: "15px 0"
        },
        thumb: {
            height: 28,
            width: 28,
            backgroundColor: "#fff",
            color: "#222",
            boxShadow: iOSBoxShadow,
            "&:focus, &:hover, &$active": {
                boxShadow: "0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)",
                // Reset on touch devices, it doesn't add specificity
                "@media (hover: none)": {
                    boxShadow: iOSBoxShadow
                }
            }
        },
        active: {},
        valueLabel: {
        },
        track: {
            height: 2
        },
        rail: {
            height: 2,
            opacity: 0.5,
            backgroundColor: "#bfbfbf"
        },
        mark: {
            backgroundColor: "#bfbfbf",
            height: 8,
            width: 1,
            marginTop: -3
        },
        markActive: {
            opacity: 1,
            backgroundColor: "currentColor"
        }
    }));


/***/ }),

/***/ 9666:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "XS": () => (/* binding */ getFilteredProducts),
/* harmony export */   "fj": () => (/* binding */ getCategoryBySlug),
/* harmony export */   "u9": () => (/* binding */ getAttributes)
/* harmony export */ });
/* harmony import */ var _apollo_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9114);
/* harmony import */ var _apollo_client__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_apollo_client__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4536);


async function getCategoryBySlug(slug) {
    if (!slug) return;
    const client = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_1__.getGraphQLClient)();
    try {
        return await client.getProductCategoryBySlug(slug, _apollo_client__WEBPACK_IMPORTED_MODULE_0__.gql`
        fragment PCategory on ProductCategory {
          id
          slug
          name
          mainImage
          parent {
            name
            slug
            id
          }
          children {
            name
            slug
            id
          }
        }
      `, "PCategory");
    } catch (error) {
        console.error(JSON.stringify(error, null, 2));
    }
}
async function getFilteredProducts({ pagedParams , filterParams ={} , categoryId  }) {
    const client = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_1__.getGraphQLClient)();
    if (categoryId) filterParams.categoryId = categoryId;
    try {
        const result = await client?.query({
            query: _apollo_client__WEBPACK_IMPORTED_MODULE_0__.gql`
        query getProducts($pagedParams: PagedParamsInput!, $filterParams: ProductFilterInput) {
          getProducts(pagedParams: $pagedParams, filterParams: $filterParams) {
            pagedMeta {
              ...PagedMetaFragment
            }
            filterMeta {
              minPrice
              maxPrice
            }
            elements {
              ...ProductFragment
            }
          }
        }
        ${client?.ProductFragment}
        ${client?.PagedMetaFragment}
      `,
            variables: {
                pagedParams,
                filterParams
            }
        });
        const filteredList = result?.data?.getProducts;
        return filteredList;
    } catch (e) {
        console.error("ProductFilter::getFiltered error: ", e.message);
    }
}
async function getAttributes() {
    const client = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_1__.getGraphQLClient)();
    const attributes = await client.getAttributes({
        pagedParams: {
            pageSize: 100
        }
    }).catch((e)=>console.error("ProductFilter::getStaticProps error: ", e)).then((data)=>data && data.elements) || undefined;
    return attributes;
}


/***/ })

};
;