import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { CollapsePanel } from '../collapse-panel';
import { useCommander } from '../../../../hooks';
import { deleteValue } from '../../../../commands';
import { CONFIG_KEY_MAP, PATH_FIELD_MAP, NON_DELETABLE_MAP } from './consts';
import { EntityForm } from './entity-form';
import { CollapsePanelCSS } from './entity-list.style';
export const EntityPanel = ({ path, entity, type, expandExtra, }) => {
    const { dispatch } = useCommander();
    const entityPath = useMemo(() => path.concat(PATH_FIELD_MAP[type], `name:${entity.data.name}`), [entity, path, type]);
    const widgetPath = useMemo(() => entityPath.concat(CONFIG_KEY_MAP[type]), [entityPath, type]);
    const handleDelete = useCallback(() => {
        dispatch(deleteValue(entityPath));
    }, [dispatch, entityPath]);
    return (_jsx(CollapsePanel, { css: CollapsePanelCSS(!entity.data.schema), title: entity.label, onDelete: handleDelete, expandExtra: expandExtra, deletable: !NON_DELETABLE_MAP[type].includes(entity.data.name), children: _jsx(EntityForm, Object.assign({}, entity, { path: widgetPath })) }));
};
