import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { SearchIcon } from "@chakra-ui/icons";
import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Input, InputGroup, InputLeftElement, SimpleGrid, } from "@chakra-ui/react";
import { componentGroups, getGroupedComponentList as getGroupedComponentList_, getComponentList, } from "@qorebase/app-runtime/src/interfaces";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import Fuse from "fuse.js";
import React, { useEffect, useRef, useState } from "react";
import ComponentHandle from "./ComponentHandle";
const components = getComponentList();
const fuse = new Fuse(components, { keys: ["id", "group"] });
const LibraryPanel = () => {
    const inputRef = useRef(null);
    const [search, setSearch] = useState("");
    const npmComponents = RuntimeContext.useSelectState((state) => state.components);
    const getGroupedComponentList = React.useCallback(getGroupedComponentList_, [
        npmComponents,
    ]);
    const [groupedComponentList, setGroupedComponentList] = useState(() => getGroupedComponentList());
    const handleSearch = (event) => {
        const search = event.currentTarget.value;
        setSearch(search);
        if (!search) {
            setGroupedComponentList(getGroupedComponentList());
        }
        else {
            const results = fuse.search(search).map((result) => result.item);
            setGroupedComponentList(getGroupedComponentList(results));
        }
    };
    useEffect(() => {
        const onKeyDown = (event) => {
            if (inputRef.current &&
                event.key.match(/^[a-zA-Z]$/g) &&
                !event.altKey &&
                !event.ctrlKey &&
                !event.metaKey &&
                ["BODY", "DIV", "BUTTON"].includes(event.target.nodeName)) {
                inputRef.current.focus();
            }
        };
        window.addEventListener("keydown", onKeyDown);
        return () => window.removeEventListener("keydown", onKeyDown);
    }, []);
    return (_jsxs(Box, Object.assign({ pb: "96", minH: "full", bg: "#f5f5f5" }, { children: [_jsx(Box, Object.assign({ px: "4", py: "2" }, { children: _jsxs(InputGroup, Object.assign({ size: "sm" }, { children: [_jsx(InputLeftElement, Object.assign({ pointerEvents: "none" }, { children: _jsx(SearchIcon, { color: "gray.300" }) })), _jsx(Input, { ref: inputRef, value: search, onChange: handleSearch, placeholder: "Type a component", bg: "white", rounded: "6px", onFocus: (event) => {
                                event.currentTarget.select();
                            } })] })) })), _jsx(Accordion, Object.assign({ allowMultiple: true, defaultIndex: componentGroups.map((_, idx) => idx) }, { children: componentGroups.map((group, i) => {
                    var _a, _b;
                    if (!((_a = groupedComponentList[group]) === null || _a === void 0 ? void 0 : _a.length)) {
                        return null;
                    }
                    return (_jsxs(AccordionItem, { children: [_jsx("h2", { children: _jsxs(AccordionButton, Object.assign({ bg: "white", _hover: {
                                        bg: "whiteAlpha.700",
                                    }, _expanded: {
                                        borderBottom: "1px solid",
                                        borderColor: "gray.200",
                                    } }, { children: [_jsx(Box, Object.assign({ flex: "1", textAlign: "left", textTransform: "capitalize", fontWeight: "bold" }, { children: group })), _jsx(AccordionIcon, {})] })) }), _jsx(AccordionPanel, Object.assign({ pb: 4 }, { children: _jsx(SimpleGrid, Object.assign({ columns: 2, gap: "2" }, { children: (_b = groupedComponentList[group]) === null || _b === void 0 ? void 0 : _b.map((component) => (_jsx(ComponentHandle, { component: component }, component.id))) })) }))] }, i));
                }) }))] })));
};
export default LibraryPanel;
//# sourceMappingURL=LibraryPanel.js.map