import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
import ComponentLoader from "../ComponentLoader/ComponentLoader";
import ErrorMessage from "../ErrorMessage/ErrorMessage";
import FieldType from "../Types/FieldType";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
import BooleanFilter from "./BooleanFilter";
import DateFilter from "./DateFilter";
import DropdownFilter from "./DropdownFilter";
import EntityFilter from "./EntityFilter";
import JSONFilter from "./JSONFilter";
import NumberFilter from "./NumberFilter";
import TextFilter from "./TextFilter";
import React from "react";
const FiltersForm = (props) => {
    var _a;
    const { translateString } = useTranslateValue();
    const tx = (value) => {
        var _a, _b;
        return (_b = (_a = translateString(value)) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : "";
    };
    if (!props.showFilter) {
        return React.createElement(React.Fragment, null);
    }
    const changeFilterData = (filterData) => {
        if (props.onFilterChanged) {
            props.onFilterChanged(filterData);
        }
    };
    const hasAdvancedFilter = Boolean(props.filters.find((filter) => {
        return filter.isAdvancedFilter;
    }));
    const showAdvancedFilterButton = hasAdvancedFilter && !props.hideAdvancedFilterToggle;
    const [internalShowMoreFilters, setShowMoreFilters] = React.useState((_a = props.showAdvancedFiltersByDefault) !== null && _a !== void 0 ? _a : false);
    const showMoreFilters = props.showAdvancedFilters !== undefined
        ? props.showAdvancedFilters
        : internalShowMoreFilters;
    const clearFilter = (key) => {
        const next = Object.assign({}, props.filterData);
        delete next[key];
        changeFilterData(next);
    };
    const visibleFilters = props.filters.filter((filter) => {
        if (filter.isAdvancedFilter) {
            return showMoreFilters && !props.isFilterLoading && !props.filterError;
        }
        return true;
    });
    return (React.createElement("div", { id: props.id },
        React.createElement("div", { className: "space-y-3" }, visibleFilters.map((filter, i) => {
            const hasValue = filter.key !== undefined &&
                props.filterData[filter.key] !== undefined &&
                props.filterData[filter.key] !== null;
            const isMultiRowFilter = filter.type === FieldType.JSON;
            return (React.createElement("div", { key: i, className: `grid grid-cols-[140px_1fr_auto] gap-3 ${isMultiRowFilter ? "items-start" : "items-center"}` },
                React.createElement("div", { className: `flex items-center min-w-0 ${isMultiRowFilter ? "pt-7" : ""}` },
                    React.createElement("label", { className: "text-sm font-medium text-gray-700 truncate" }, tx(filter.title))),
                React.createElement("div", { className: "min-w-0" },
                    React.createElement(DropdownFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData, isMultiSelect: filter.type === FieldType.MultiSelectDropdown }),
                    React.createElement(EntityFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData }),
                    React.createElement(BooleanFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData }),
                    React.createElement(DateFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData }),
                    React.createElement(TextFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData }),
                    React.createElement(NumberFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData }),
                    React.createElement(JSONFilter, { filter: filter, filterData: props.filterData, onFilterChanged: changeFilterData, jsonKeys: filter.jsonKeys, jsonValueSuggestions: filter.jsonValueSuggestions, onJsonKeySelected: filter.onJsonKeySelected, isLoadingJsonKeys: filter.isLoadingJsonKeys, loadingJsonValueKeys: filter.loadingJsonValueKeys, onJsonValueSearch: filter.onJsonValueSearch, enableOperators: filter.jsonEnableOperators })),
                React.createElement("div", { className: `flex items-center ${isMultiRowFilter ? "pt-7" : ""}` }, hasValue && filter.key ? (React.createElement("button", { type: "button", onClick: () => {
                        return clearFilter(filter.key);
                    }, className: "p-1.5 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors", "aria-label": `${tx("Clear")} ${tx(filter.title)} ${tx("filter")}`, title: `${tx("Clear")} ${tx(filter.title)}` },
                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-4 h-4" },
                        React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })))) : (React.createElement("div", { className: "w-7", "aria-hidden": "true" })))));
        })),
        props.showFilter && props.isFilterLoading && !props.filterError && (React.createElement("div", { className: "py-4" },
            React.createElement(ComponentLoader, null))),
        props.showFilter && props.filterError && (React.createElement("div", { className: "py-4" },
            React.createElement(ErrorMessage, { message: props.filterError, onRefreshClick: props.onFilterRefreshClick }))),
        showAdvancedFilterButton && (React.createElement(Button, { className: "-ml-3 mt-3", buttonSize: ButtonSize.Small, buttonStyle: ButtonStyleType.SECONDARY_LINK, icon: showMoreFilters ? IconProp.ChevronUp : IconProp.ChevronDown, title: tx(showMoreFilters ? "Hide Advanced Filters" : "Show Advanced Filters"), onClick: () => {
                setShowMoreFilters((currentValue) => {
                    var _a;
                    const newValue = !currentValue;
                    (_a = props.onAdvancedFiltersToggle) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
                    return newValue;
                });
            } }))));
};
export default FiltersForm;
//# sourceMappingURL=FiltersForm.js.map