import * as React from 'react';
import { Box } from 'rebass';
import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import { Tabs } from '../../../../components/Tabs';
import { Tag } from '../../../../components/Tag';
import { useAdaptable } from '../../../AdaptableContext';
import { AdaptableObjectListItemView } from '../../../Components/AdaptableObjectList/AdaptableObjectList';
import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { LayoutColumnFilter } from '../../../Components/ColumnFilter/LayoutColumnFilter';
export 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;
};
export const FilterSectionSummary = () => {
    const { data: layout } = useOnePageAdaptableWizardContext();
    const adaptable = useAdaptable();
    const fitlerViewItems = getLayoutFilterViewItems(layout, adaptable.api);
    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
};
export const FilterSection = (props) => {
    const adaptable = useAdaptable();
    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
    const { data: layout } = 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, { style: { height: '100%' } },
        React.createElement(Tabs.Tab, null, "Column Filters"),
        React.createElement(Tabs.Content, null,
            React.createElement(FormLayout, { mb: 2 },
                React.createElement(FormRow, { label: "Add Column Filter" },
                    React.createElement(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(Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
                const items = [
                    ...filterModule.toView(columnFilter).items,
                    {
                        name: 'Column Filter',
                        view: (React.createElement(LayoutColumnFilter, { columnFilter: columnFilter, onColumnFilterChange: (columnFilter) => {
                                handlePredicateEdit(columnFilter);
                            } })),
                    },
                ];
                return (React.createElement(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
            }))),
            ' ')));
};
