import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useContext, useMemo, } from 'react';
import { InspectedEntityContext, EntitySelectionContext } from '../../../../providers';
import { useConfig } from '../../../../hooks';
import { Tree } from '../tree';
import { CHILDREN_FIELD_MAP } from '../../consts';
import { parseTemplates, getInspectedKey, getSelectedPaths } from './utils';
export const TemplatesTree = ({ onDrop }) => {
    const { path: inspectedEntityPath } = useContext(InspectedEntityContext);
    const { paths: selectedEntitiesPaths } = useContext(EntitySelectionContext);
    const templates = useConfig('templates');
    const treeData = useMemo(() => parseTemplates(templates), [templates]);
    return (_jsx(Tree, { treeData: treeData, inspectedKey: getInspectedKey(inspectedEntityPath), selectedPaths: getSelectedPaths(selectedEntitiesPaths), persistentStorageKey: "explorer.tab.templates", draggable: true, onDrop: onDrop, childrenFieldMap: CHILDREN_FIELD_MAP }));
};
