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 './renderer.style';
import { EffectPanel } from './effect-panel';
const ACTIVE_ENTRY_OPACITY = 0.5;
const withDraggable = (Component) => {
    const WrappedComponent = (props) => {
        const { id } = props;
        const { attributes, listeners, setNodeRef, transform, transition, active } = useSortable({ id: id });
        const style = Object.assign({ transform: CSS.Transform.toString(transform), transition }, ((active === null || active === void 0 ? void 0 : active.id) === id && { opacity: ACTIVE_ENTRY_OPACITY }));
        return (_jsx("div", { ref: setNodeRef, style: style, children: _jsx(Component, Object.assign({ extra: _jsx(HolderOutlined, Object.assign({ css: HolderOutlinedCSS }, attributes, listeners)) }, props)) }));
    };
    return WrappedComponent;
};
export const DraggableEffectPanel = withDraggable(EffectPanel);
