import { jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { Tooltip } from "antd";
import { Icon, icons } from "../../../icon/index.mjs";
const IconFilterList = (props)=>{
    const { currentKey, filterKey, onChange, changePop } = props;
    const iconKeysByFilter = useMemo(()=>{
        if (!filterKey) return icons;
        const filterIcons = new Map();
        for (const key of icons.keys())if (key.toLowerCase().includes(filterKey.toLowerCase())) filterIcons.set(key, icons.get(key));
        return filterIcons;
    }, [
        filterKey
    ]);
    return /*#__PURE__*/ jsx("div", {
        style: {
            width: '26em',
            maxHeight: '20em',
            overflowY: 'auto'
        },
        children: [
            ...iconKeysByFilter.keys()
        ].map((key)=>/*#__PURE__*/ jsx("span", {
                style: {
                    fontSize: 18,
                    marginRight: 10,
                    cursor: 'pointer',
                    backgroundColor: currentKey == key ? '#9bb0d393' : ''
                },
                children: /*#__PURE__*/ jsx(Tooltip, {
                    destroyTooltipOnHide: true,
                    mouseEnterDelay: 0.3,
                    mouseLeaveDelay: 0.3,
                    placement: "top",
                    title: key,
                    arrow: {
                        pointAtCenter: true
                    },
                    children: /*#__PURE__*/ jsx(Icon, {
                        type: key,
                        onClick: ()=>{
                            onChange(key);
                            changePop(false);
                        }
                    })
                })
            }, key))
    });
};
export { IconFilterList };
