import * as React from 'react';
import { useEffect } from 'react';
import { useAdaptable } from '../../../AdaptableContext';
import { ColumnValuesSelect } from '../../FilterForm/ListBoxFilterForm';
const renderSingleValue = (option) => {
    return option.label;
};
const renderMultipleValues = (values, options) => {
    const { focused, placeholder } = options;
    const text = values.map(renderSingleValue).join(', ');
    return values.length ? (React.createElement(React.Fragment, null,
        React.createElement("span", { "data-name": "multiple-values-count" },
            "(",
            values.length,
            ")"),
        " ",
        text)) : focused ? null : (placeholder ?? 'Select...');
};
export function useDistinctFilterColumnValues(options) {
    const { columnId, searchValueRef } = options;
    const { api } = useAdaptable();
    const [valuesLoadTrigger, setValuesLoadTrigger] = React.useState(0);
    const triggerValuesLoad = React.useCallback(() => {
        setValuesLoadTrigger((prev) => prev + 1);
    }, []);
    const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], dataLoadIsComplete: false, searchValueUsedInFilterValue: false });
    const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
    useEffect(() => {
        if (valuesLoadTrigger === 0) {
            // skip the first render
            return;
        }
        let ignore = false;
        setIsDistinctColumnValuesLoading(true);
        let searchValueUsedInFilterValue = false;
        api.gridApi.internalApi
            .getDistinctFilterDisplayValuesForColumn({
            columnId,
            get currentSearchValue() {
                searchValueUsedInFilterValue = true;
                return searchValueRef ? searchValueRef.current : '';
            },
        })
            .then((distinctFilterDisplayValues) => {
            if (ignore) {
                return;
            }
            setQuickFilterValues({
                values: distinctFilterDisplayValues,
                dataLoadIsComplete: true,
                searchValueUsedInFilterValue,
            });
            setIsDistinctColumnValuesLoading(false);
        });
        return () => {
            ignore = true;
        };
    }, [valuesLoadTrigger, columnId]);
    return {
        isDistinctColumnValuesLoading,
        quickFilterValues,
        setQuickFilterValues,
        triggerValuesLoad,
    };
}
/**
 * This component was ported and modified to not know about colum  filter and predicates.
 * It should be further refactored to be easily ported;
 */
export const FloatingFilterValues = (props) => {
    const { api } = useAdaptable();
    const currentColumn = api.columnApi.getColumnWithColumnId(props.columnId);
    const searchValueRef = React.useRef('');
    const { isDistinctColumnValuesLoading, quickFilterValues, triggerValuesLoad } = useDistinctFilterColumnValues({
        columnId: props.columnId,
        searchValueRef,
    });
    useEffect(triggerValuesLoad, []);
    const onMenuOpen = triggerValuesLoad;
    const onInputChange = React.useCallback((value) => {
        searchValueRef.current = value;
        if (quickFilterValues.searchValueUsedInFilterValue) {
            triggerValuesLoad();
        }
    }, [quickFilterValues.searchValueUsedInFilterValue]);
    return (React.createElement(ColumnValuesSelect, { selectProps: props.inline
            ? {
                ...props.selectProps,
                'data-name': 'Select Values',
                renderMultipleValues,
                isClearable: false,
                styles: {
                    dropdownIndicator: {
                        display: 'none',
                    },
                    container: {
                        height: '100%',
                        fontWeight: 'normal',
                    },
                    control: {
                        height: '100%',
                        borderRadius: 'none',
                        border: 'none',
                        // @ts-ignore ignore
                        '&:hover': {
                            border: 'none',
                        },
                    },
                    ...(props.value?.length
                        ? {
                            valueContainer: {
                                fontWeight: 'var(--ab-cmp-quickfilter-selected-options-text__font-weight)',
                            },
                        }
                        : {}),
                },
                onMenuOpen,
                onInputChange,
            }
            : { ...props.selectProps, onMenuOpen, onInputChange }, disabled: props.disabled, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
};
