"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExampleFiltersSelected = void 0;
const react_1 = __importDefault(require("react"));
const hooks_1 = require("../../hooks");
const ExampleFiltersSelected = (props) => {
    return (react_1.default.createElement("div", { className: "rs__filters-selected" },
        react_1.default.createElement("h3", { className: "rs__filters-selected__name" }, "Filters Selected"),
        react_1.default.createElement("ul", { className: "rs__filters-selected__list" }, props.selectedFilters.map((selectedFilter) => (react_1.default.createElement(ExampleFiltersSelectedItem, { key: selectedFilter.key + selectedFilter.value, selectedFilter: selectedFilter, handleRemove: props.handleRemove }))))));
};
exports.ExampleFiltersSelected = ExampleFiltersSelected;
const ExampleFiltersSelectedItem = (props) => {
    var _a;
    const filtersHook = (0, hooks_1.useFilters)();
    const filter = (_a = filtersHook.filters) === null || _a === void 0 ? void 0 : _a.find((filter) => filter.handle === props.selectedFilter.key);
    return (react_1.default.createElement("li", { className: "rs__filters-selected__list-item" },
        react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label" },
            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(props.selectedFilter.key) },
                props.selectedFilter.label,
                ": "),
            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "single" && filter.displayView === "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
                react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [
                        props.selectedFilter.value.label,
                    ]) }, props.selectedFilter.value.label))),
            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "single" && filter.displayView !== "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
                react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [
                        props.selectedFilter.value,
                    ]) }, props.selectedFilter.value))),
            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "multi" && filter.displayView === "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, props.selectedFilter.value.map((value) => (react_1.default.createElement("span", { key: value.label, onClick: () => props.handleRemove(props.selectedFilter.key, [value.label]) }, value.label))))),
            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "multi" && filter.displayView !== "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, props.selectedFilter.value.map((value) => (react_1.default.createElement("span", { key: value, onClick: () => props.handleRemove(props.selectedFilter.key, [value]) }, value))))),
            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "slider" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
                react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [""]) }, `${filter.displaySliderPrefix}${props.selectedFilter.value[0]} to ${filter.displaySliderPrefix}${props.selectedFilter.value[1]}`))))));
};
//# sourceMappingURL=ExampleFiltersSelected.js.map