"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/AdaptableObjectList");
const ColumnSelector_1 = require("../../../Components/Selectors/ColumnSelector");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const LayoutColumnFilter_1 = require("../../../Components/ColumnFilter/LayoutColumnFilter");
const Flex_1 = require("../../../../components/Flex");
const isColumnFiltersValid = (layout) => {
    const invalidColumnFilters = (layout.ColumnFilters ?? [])?.filter((columnFilter) => !columnFilter?.Predicates[0]?.PredicateId);
    if (invalidColumnFilters.length > 0) {
        return 'Please select a predicate for each column filter.';
    }
    return true;
};
exports.isColumnFiltersValid = isColumnFiltersValid;
const FilterSectionSummary = () => {
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const fitlerViewItems = (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, adaptable.api);
    return (React.createElement(Flex_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, className: "twa:mb-1 twa:mr-1" }, value)))) : (React.createElement(Tag_1.Tag, null, "No Column Filters"))));
};
exports.FilterSectionSummary = FilterSectionSummary;
const FilterSection = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const layoutFilters = layout.ColumnFilters ?? [];
    const handleDelete = React.useCallback((columnFilter) => {
        props.onChange({
            ...layout,
            ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId),
        });
    }, [layout]);
    const handlePredicateEdit = React.useCallback((columnFilter) => {
        props.onChange({
            ...layout,
            ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId ? { ...columnFilter } : layoutFilter),
        });
    }, [layout.ColumnFilters]);
    return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
        React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
        React.createElement(Tabs_1.Tabs.Content, null,
            React.createElement(FormLayout_1.default, { className: "twa:mb-2" },
                React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
                            props.onChange({
                                ...layout,
                                ColumnFilters: [
                                    ...layoutFilters,
                                    {
                                        ColumnId: option,
                                        Predicates: [],
                                    },
                                ],
                            });
                        } }))),
            layoutFilters?.length > 0 && (React.createElement(Flex_1.Box, { className: "twa:p-0", as: "ul" }, layoutFilters.map((columnFilter) => {
                const items = [
                    ...filterModule.toView(columnFilter).items,
                    {
                        name: 'Column Filter',
                        view: (React.createElement(LayoutColumnFilter_1.LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
                                handlePredicateEdit(columnFilter);
                            } })),
                    },
                ];
                return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
            }))))));
};
exports.FilterSection = FilterSection;
