import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { HolderOutlined } from '@ant-design/icons';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { HolderOutlinedCSS } from './entity-list.style';
import { EntityPanel } from './entity-panel';
const ACTIVE_ENTITY_OPACITY = 0.5;
const withDraggable = (Component) => {
    const WrappedComponent = (props) => {
        const { entity } = props;
        const { attributes, listeners, setNodeRef, transform, transition, active, } = useSortable({ id: entity.id });
        const style = Object.assign({ transform: CSS.Transform.toString(transform), transition }, ((active === null || active === void 0 ? void 0 : active.id) === entity.id && { opacity: ACTIVE_ENTITY_OPACITY }));
        return (_jsx("div", { ref: setNodeRef, style: style, children: _jsx(Component, Object.assign({ expandExtra: (_jsx(HolderOutlined, Object.assign({ css: HolderOutlinedCSS }, attributes, listeners))) }, props)) }));
    };
    return WrappedComponent;
};
export const DraggableEntityPanel = withDraggable(EntityPanel);
