import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
import ComboBox, {} from '../ComboBox';
import Icon, { icons as budIconNames, streamlineIcons as streamlineIconNames } from '../Icon';
import { menuHelpers } from '../Menu';
import { useI18n } from '../../hooks';
import { createStringMatcher } from '../../utils';
const getFilteredItems = (iconList, filterValue) => {
    if (!filterValue)
        return iconList;
    const regExp = createStringMatcher(filterValue);
    return iconList.filter(({ primary }) => regExp.test(primary));
};
const pageSize = 20;
const IconPicker = forwardRef(function IconPicker(props, ref) {
    const { defaultSelection, scrollAt, onSelect, set = 'budicon', ...restProps } = props;
    const iconList = useMemo(() => {
        const icons = set === 'budicon' ? budIconNames : streamlineIconNames;
        return icons.map(icon => {
            return {
                id: icon,
                primary: icon,
                visual: _jsx(Icon, { set: set, name: icon }),
                selected: false
            };
        });
    }, [set]);
    const [items, setItems] = useState(() => iconList.slice(0, pageSize));
    const [isLoading, setIsLoading] = useState(false);
    const [hasMore, setHasMore] = useState(true);
    const [selectedIcon, setSelectedIcon] = useState(defaultSelection ?? '');
    const [filterValue, setFilterValue] = useState('');
    const t = useI18n();
    const loadMoreTimeoutId = useRef();
    const resetItems = useCallback(() => {
        const filteredItems = getFilteredItems(iconList, filterValue);
        setItems(menuHelpers.selectItem(filteredItems.slice(0, pageSize), selectedIcon, 'single-select'));
        setHasMore(filteredItems.length > pageSize);
    }, [filterValue, selectedIcon]);
    useEffect(() => {
        setItems(iconList.slice(0, pageSize));
        setSelectedIcon(defaultSelection);
    }, [iconList]);
    useEffect(() => {
        resetItems();
    }, [filterValue, selectedIcon]);
    useEffect(() => {
        return () => {
            if (loadMoreTimeoutId.current)
                clearTimeout(loadMoreTimeoutId.current);
        };
    }, []);
    const loadMore = useCallback(() => {
        if (!isLoading) {
            setIsLoading(true);
            if (loadMoreTimeoutId.current)
                clearTimeout(loadMoreTimeoutId.current);
            loadMoreTimeoutId.current = setTimeout(() => {
                setIsLoading(false);
                setItems(prevItems => {
                    const newItems = menuHelpers.mapTree(getFilteredItems(iconList, filterValue).slice(prevItems.length, prevItems.length + pageSize), item => ({
                        ...item,
                        selected: item.items ? undefined : selectedIcon === item.id
                    }));
                    if (newItems.length === 0)
                        setHasMore(false);
                    return menuHelpers.appendTo(prevItems, newItems);
                });
            }, 500);
        }
    }, [filterValue, isLoading]);
    const selectItem = useCallback((iconName) => {
        setSelectedIcon(iconName);
        setFilterValue('');
        onSelect?.(iconName);
    }, [onSelect]);
    const clearSelection = useCallback(() => {
        setSelectedIcon('');
        setItems(cur => menuHelpers.mapTree(cur, item => {
            return {
                ...item,
                selected: false
            };
        }));
    }, []);
    return (_jsx(ComboBox, { ...restProps, ref: ref, selected: selectedIcon
            ? {
                items: {
                    id: selectedIcon,
                    text: selectedIcon
                }
            }
            : undefined, value: filterValue, onChange: (e) => {
            if (!e.target.value)
                clearSelection();
            setFilterValue(e.target.value);
        }, onBlur: () => {
            resetItems();
            setFilterValue('');
        }, menu: {
            items,
            onItemClick: selectItem,
            scrollAt,
            accent: filterValue ? createStringMatcher(filterValue) : undefined,
            emptyText: t('no_items'),
            loading: isLoading,
            loadMore: hasMore ? loadMore : undefined
        }, visual: selectedIcon ? _jsx(Icon, { set: set, name: selectedIcon }) : undefined }));
});
export default IconPicker;
//# sourceMappingURL=IconPicker.js.map