"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExampleFilterListBox = exports.ExampleFilterListSwatch = exports.ExampleFilterListCheckbox = exports.ExampleFilterListRadio = exports.ExampleFilterListList = exports.ExampleFilterList = void 0;
const react_1 = __importDefault(require("react"));
const ExampleFilterList = (props) => {
    return (react_1.default.createElement("div", { className: "rs__filter" },
        react_1.default.createElement("h3", { className: "rs__filter__name" }, props.filter.name),
        props.filter.displayView === "list" ? (react_1.default.createElement(exports.ExampleFilterListList, Object.assign({}, props))) : null,
        props.filter.displayType === "single" &&
            props.filter.displayView === "check" ? (react_1.default.createElement(exports.ExampleFilterListRadio, Object.assign({}, props))) : null,
        props.filter.displayType === "multi" &&
            props.filter.displayView === "check" ? (react_1.default.createElement(exports.ExampleFilterListCheckbox, Object.assign({}, props))) : null,
        props.filter.displayView === "swatch" ? (react_1.default.createElement(exports.ExampleFilterListSwatch, Object.assign({}, props))) : null,
        props.filter.displayView === "box" ? (react_1.default.createElement(exports.ExampleFilterListBox, Object.assign({}, props))) : null));
};
exports.ExampleFilterList = ExampleFilterList;
const ExampleFilterListList = (props) => {
    return (react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
        react_1.default.createElement("label", { className: "rs__filter__list-item-label", onClick: () => props.filterListProps.handleChange(option.key) },
            react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.label),
            react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
                "(",
                option.doc_count,
                ")")))))));
};
exports.ExampleFilterListList = ExampleFilterListList;
const ExampleFilterListRadio = (props) => {
    return (react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
        react_1.default.createElement("label", { className: "rs__filter__list-item-label" },
            react_1.default.createElement("input", { className: "rs__filter__list-item-input", value: option.key, type: "radio", checked: option.checked, onChange: (event) => props.filterListProps.handleChange(event.target.value) }),
            react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.label),
            react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
                "(",
                option.doc_count,
                ")")))))));
};
exports.ExampleFilterListRadio = ExampleFilterListRadio;
const ExampleFilterListCheckbox = (props) => {
    return (react_1.default.createElement("ul", { className: "rs__filter__list" }, props.filterListProps.options.map((option) => (react_1.default.createElement("li", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
        react_1.default.createElement("label", { className: "rs__filter__list-item-label" },
            react_1.default.createElement("input", { className: "rs__filter__list-item-input", value: option.key, type: "checkbox", checked: option.checked, onChange: (event) => props.filterListProps.handleChange(event.target.value) }),
            react_1.default.createElement("span", { className: "rs__filter__list-item-key" }, option.label),
            react_1.default.createElement("span", { className: "rs__filter__list-item-count" },
                "(",
                option.doc_count,
                ")")))))));
};
exports.ExampleFilterListCheckbox = ExampleFilterListCheckbox;
const ExampleFilterListSwatch = (props) => {
    return (react_1.default.createElement("div", { className: "rs__filter__list", style: {
            display: "flex",
            flexWrap: "wrap",
        } }, props.filterListProps.options.map((option) => (react_1.default.createElement("div", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
        react_1.default.createElement("div", { className: "rs__filter__list-item-label", style: {
                display: "inline-block",
                width: "20px",
                height: "20px",
                marginRight: "2px",
                marginBottom: "2px",
                borderRadius: "50%",
                backgroundColor: option.key,
                border: option.checked
                    ? "1px solid black"
                    : "1px solid transparent",
            }, onClick: () => props.filterListProps.handleChange(option.key) }))))));
};
exports.ExampleFilterListSwatch = ExampleFilterListSwatch;
const ExampleFilterListBox = (props) => {
    return (react_1.default.createElement("div", { className: "rs__filter__list", style: {
            display: "flex",
            flexWrap: "wrap",
        } }, props.filterListProps.options.map((option) => (react_1.default.createElement("div", { key: option.key, className: `rs__filter__list-item ${option.checked ? "rs__filter__list-item-active" : ""}` },
        react_1.default.createElement("div", { className: "rs__filter__list-item-label", style: {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                width: "40px",
                height: "40px",
                marginRight: "2px",
                marginBottom: "2px",
                border: "1px solid black",
                overflow: "hidden",
                cursor: "pointer",
                color: option.checked ? "white" : "black",
                backgroundColor: option.checked ? "black" : "white",
            }, onClick: () => props.filterListProps.handleChange(option.key) }, option.key))))));
};
exports.ExampleFilterListBox = ExampleFilterListBox;
//# sourceMappingURL=ExampleFilterList.js.map