import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';
import { makeStyles, Divider, Fade, TextField, InputAdornment, } from '@material-ui/core';
import { fluentLibraryIcons } from '../../assets/unityIcons/LibraryData';
import FluentIconKey from '../../UI/dataDisplay/map/FluentIconKey';
import SelectedLibraryItem from './SelectedLibraryItem';
import { FluentIcon } from './FluentIcon';
import { SearchIcon } from '@fluentui/react-icons';
import { unityIcons } from './UnityIconLibrary';
import { debounce } from 'lodash-es';
import InfiniteScroll from 'react-infinite-scroll-component';
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2),
        height: 400,
    },
    divider: {
        marginLeft: theme.spacing(2),
        marginRight: theme.spacing(2),
        height: 400,
    },
    selection: {
        display: 'flex',
        flexDirection: 'row',
    },
    search: {
        marginLeft: theme.spacing(2),
        width: 312,
    },
    iconsContainer: {
        minWidth: '76%',
        overflow: 'auto',
    },
    input: {
        height: 34,
    },
    formTextInput: {
        fontSize: 13,
    },
    labelRoot: {
        fontSize: 13,
    },
}));
const IconLibrary = props => {
    const { addItem, title, selectedIconName } = props;
    const classes = useStyles();
    const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);
    const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);
    const [icons, setIcons] = useState([]);
    const [hasMoreToScroll, setHasMoreToScroll] = useState(true);
    const [searchValue, setSearchValue] = useState('');
    const selectItem = useCallback(item => {
        setSelectedIcon(item);
    }, []);
    const combinedLibraryIcons = useMemo(() => {
        return fluentLibraryIcons.concat(unityIcons);
    }, []);
    const iconListObj = useMemo(() => {
        return combinedLibraryIcons.reduce((iconList, item) => {
            const iconObj = {
                id: item.id,
                label: item.label,
                icon: (React.createElement(FluentIconKey, { key: item.id, icon: item.icon, tooltip: item.label, select: () => selectItem(item), iconType: item.type })),
            };
            iconList.push(iconObj);
            return iconList;
        }, []);
    }, [combinedLibraryIcons, selectItem]);
    const getSearchableIcons = useCallback(value => {
        let icons = [];
        if (!value) {
            icons = iconListObj.map(item => item.icon);
        }
        else {
            icons = iconListObj
                .filter(item => item.label.toLowerCase().includes(value))
                .map(item => item.icon);
        }
        setFilteredFluentIcons(icons);
    }, [iconListObj]);
    const handleFluentIconSearch = useCallback(event => {
        const value = event.target.value;
        setSearchValue(value);
        const debounceSearch = debounce(value => {
            getSearchableIcons(value);
        }, 200);
        debounceSearch(value);
    }, [getSearchableIcons]);
    const fetchMoreIcons = useCallback(() => {
        if (filteredFluentIcons.length <= icons.length) {
            setHasMoreToScroll(false);
            return;
        }
        const updatedIcons = [...icons];
        setIcons(updatedIcons.concat(filteredFluentIcons.slice(icons.length, icons.length + 30)));
    }, [icons, filteredFluentIcons]);
    useEffect(() => {
        setIcons(filteredFluentIcons.slice(0, 150));
        setHasMoreToScroll(filteredFluentIcons.length > 150);
    }, [filteredFluentIcons]);
    useEffect(() => {
        getSearchableIcons();
    }, [getSearchableIcons]);
    useEffect(() => {
        const initialIcon = combinedLibraryIcons.find(icon => icon.id === selectedIconName);
        setSelectedIcon(initialIcon);
    }, [combinedLibraryIcons, selectedIconName]);
    return (React.createElement(React.Fragment, null, React.createElement(TextField, { className: classes.search, id: "search", placeholder: "Search icons", variant: "outlined", margin: "normal", size: "small", value: searchValue, onChange: handleFluentIconSearch, InputProps: {
            startAdornment: (React.createElement(InputAdornment, { position: "start" }, React.createElement(FluentIcon, { component: SearchIcon }))),
            classes: {
                root: classes.input,
                input: classes.formTextInput,
            },
        }, InputLabelProps: {
            classes: {
                root: classes.labelRoot,
            },
        } }), React.createElement(InfiniteScroll, { dataLength: icons.length, next: fetchMoreIcons, hasMore: hasMoreToScroll, scrollableTarget: "scrollableDiv" }, React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.iconsContainer, id: "scrollableDiv" }, icons), selectedIcon && (React.createElement("div", { className: classes.selection }, React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" })), selectedIcon && (React.createElement(Fade, { in: selectedIcon }, React.createElement("div", null, React.createElement(SelectedLibraryItem, { addItem: addItem, item: selectedIcon, title: title }))))))))));
};
export default memo(IconLibrary);
//# sourceMappingURL=IconLibrary.js.map