import * as React from 'react';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { ColumnSelector } from '../Selectors/ColumnSelector';
import { AdaptableColumnFilter } from './AdaptableColumnFilter';
import { useAdaptable } from '../../AdaptableContext';
import { AdaptableIconComponent } from '../AdaptableIconComponent';
import { Box, Flex } from '../../../components/Flex';
export const ColumnFilterWindow = (props) => {
    const { api } = useAdaptable();
    const { value: initialColumnId } = props?.popupProps;
    const [columnId, setColumnId] = React.useState(initialColumnId);
    React.useEffect(() => {
        setColumnId(initialColumnId);
    }, [props.popupProps.value]);
    // const onChange = props.popupProps.onChange;
    return (React.createElement(Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full" },
        React.createElement(Box, { className: "twa:mb-2" },
            React.createElement(FormLayout, null,
                React.createElement(FormRow, { label: "Column" },
                    React.createElement(ColumnSelector, { renderOption: (column) => {
                            const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
                            const label = column.friendlyName ?? column.columnId;
                            if (columnFilter &&
                                api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
                                return (React.createElement(Flex, null,
                                    label,
                                    React.createElement(Box, { className: "twa:flex-1" }),
                                    React.createElement(AdaptableIconComponent, { icon: { name: 'filter' } })));
                            }
                            return label;
                        }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
        React.createElement(AdaptableColumnFilter, { columnId: columnId, location: 'filterForm' })));
};
