var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React, { useEffect, useState } from "react";
import { searchAndLoadPublicProducts, useAppDispatch, } from "@nimles/react-redux";
import { FacetAutoComplete } from "./FacetAutoComplete";
import { Column, Row } from "@nimles/react-web-components";
const compare = (property, descending) => {
    return (a, b) => {
        const aProperty = a[property];
        const bProperty = b[property];
        if (typeof aProperty === "number" && typeof bProperty === "number") {
            return aProperty - bProperty;
        }
        if (aProperty < bProperty) {
            return descending ? 1 : -1;
        }
        if (aProperty > bProperty) {
            return descending ? -1 : 1;
        }
        return 0;
    };
};
const sortBy = (array, property, descending) => array.sort(compare(property, descending));
const getFacets = (facetName) => {
    if (!facetName) {
        return;
    }
    return facetName.indexOf("<=>") === -1
        ? `${facetName},count:1000`
        : facetName.split("<=>").map((f) => `${f},count:1000`);
};
export const ProductFacetSelector = () => {
    const dispatch = useAppDispatch();
    const facets = [
        "FitsBrand",
        "FitsModel",
        "FitsStartYear<=>FitsEndYear",
        "FitsAttribute1",
        "FitsAttribute2",
    ];
    const [selectedFacets, setSelectedFacets] = useState([]);
    const [availableFacetsArray, setAvailableFacetsArray] = useState([]);
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            const response = yield dispatch(searchAndLoadPublicProducts({
                facets: `${facets[0]},count:1000`,
                take: 24,
            }));
            const facetName = facets[0];
            const facetResult = response.facets[facetName.replace(/^\w/, (c) => c.toLowerCase())];
            setAvailableFacetsArray([facetResult]);
        }))();
    }, facets);
    const handleFacetSelect = (value, index) => __awaiter(void 0, void 0, void 0, function* () {
        if (index >= facets.length) {
            return;
        }
        if (!value) {
            setSelectedFacets(selectedFacets.splice(0, index));
            return;
        }
        const facetName = facets[index + 1];
        const alreadySelectedFacets = [...selectedFacets.splice(0, index), value];
        setSelectedFacets(alreadySelectedFacets);
        const queryFacets = getFacets(facetName);
        const queryParameters = {
            filter: alreadySelectedFacets
                .map((f, i) => facets[i].indexOf("<=>") === -1
                ? `${facets[i]} eq '${f}'`
                : facets[i]
                    .split("<=>")
                    .map((p, idx) => idx === 0 ? `${p} le ${f}` : `(${p} ge ${f} or ${p} eq 0)`)
                    .join(" and "))
                .join(" and "),
            take: 24,
        };
        if (queryFacets) {
            queryParameters.facets = queryFacets;
        }
        var response = yield dispatch(searchAndLoadPublicProducts(queryParameters));
        const facetResult = getFacetResult(facetName, response);
        if (facetResult) {
            setAvailableFacetsArray([
                ...availableFacetsArray.splice(0, index + 1),
                facetResult,
            ]);
        }
    });
    return (<Row wrap>
      {availableFacetsArray
            .slice(0, selectedFacets.length + 1)
            .map((availableFacets, index) => {
            return (<Column xs={100}>
              <FacetAutoComplete availableFacets={availableFacets} selectedFacet={selectedFacets[index]} onSelect={(value) => handleFacetSelect(value, index)}/>
            </Column>);
        })}
    </Row>);
};
function range(start, end) {
    return new Array(end - start + 1).fill(undefined).map((_, i) => i + start);
}
const getFacetResult = (facetName, response) => {
    if (!response.facets) {
        return;
    }
    if (facetName.indexOf("<=>") > -1) {
        const facetResults = facetName
            .split("<=>")
            .map((f) => response.facets[f.replace(/^\w/, (c) => c.toLowerCase())]);
        const startYear = sortBy(facetResults[0], "value")[0].value;
        const endYear = facetResults[1].some((f) => f.value === 0)
            ? 2020
            : sortBy(facetResults[1], "value", true)[0].value;
        return range(startYear, endYear).map((value) => {
            return { value };
        });
    }
    return response.facets[facetName.replace(/^\w/, (c) => c.toLowerCase())];
};
//# sourceMappingURL=ProductFacetSelector.jsx.map