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