import * as React from 'react';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import { isEqual } from 'date-fns';
import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
import join from '../../../components/utils/join';
import { Select } from '../../../components/Select';
const baseClassName = 'ab-ListBoxFilterForm';
export const ColumnValuesSelect = (props) => {
    const column = props.column;
    const selectedColumnValues = props.value || [];
    const value = [];
    const options = props.options.filter((distinctValue, index) => {
        let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
        // special case for date objects, need to check against string values
        if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
            isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
        }
        const columnLabel = distinctValue.label;
        if (StringExtensions.IsNullOrEmpty(columnLabel)) {
            return false;
        }
        if (isActive) {
            value.push(distinctValue.value);
        }
        return true;
    });
    const menuStyle = React.useMemo(() => {
        return {
            minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
        };
    }, [column.columnId]);
    const component = (React.createElement(Select, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: 'menulist', closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
    return (React.createElement("div", { className: join(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
            const event = e.nativeEvent || e;
            event.stopPropagation = () => {
                // see #ensure-keyboard-navigation-works-in-column-values-filter
                // we want to prevent ag grid from stopping the propagation of the event
                // so that the event can be handled by the select component and thus makes keyboard navigation work
                //
                // the solution is to reassign the stopPropagation method to a function that does nothing
            };
        } }, component));
};
