import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useContext, useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { EntityList } from '../entity-list';
import { InspectedEntityContext, SchemasContext } from '../../../../providers';
import { useConfig } from '../../../../hooks';
export const ComponentList = () => {
    const { t } = useTranslation();
    const { path = [] } = useContext(InspectedEntityContext);
    const { components: availableComponents } = useContext(SchemasContext);
    const { components = [] } = useConfig(path);
    const addedComponents = useMemo(() => components.reduce((acc, component) => acc.add(component.name), new Set()), [components]);
    const handleCreate = useCallback((name, filepath) => {
        window.electron.createComponent(name, filepath);
    }, []);
    return (_jsx(EntityList, { path: path, entities: availableComponents, addedEntities: addedComponents, type: "component", placeholder: t('inspector.componentList.addNew.button.title'), sort: true, onCreate: handleCreate }));
};
