import React from 'react';
import Portal from '../../../utils/ReactPortal/ReactPortal';
import { DragLayer } from 'react-dnd';
import { ZIndex } from '../../../common/ZIndex';
const layerStyles = {
    position: 'fixed',
    pointerEvents: 'none',
    zIndex: ZIndex.dragLayer,
    left: 0,
    top: 0,
};
let dragPreviewRef = null;
const onOffsetChange = monitor => {
    if (!dragPreviewRef) {
        return;
    }
    const offset = monitor.getSourceClientOffset() || monitor.getInitialClientOffset();
    if (!offset) {
        return;
    }
    const transform = `translate(${offset.x}px, ${offset.y}px)`;
    dragPreviewRef.style.transform = transform;
    dragPreviewRef.style['-webkit-transform'] = transform;
};
class CustomDragLayer extends React.Component {
    constructor() {
        super(...arguments);
        this.shouldRenderLayer = (props = this.props) => {
            const { id, item, itemType, draggedType, isDragging } = props;
            return isDragging && id === item.id && itemType === draggedType;
        };
        this.renderPreview = () => {
            const { offsetOfHandle } = this.props;
            const styles = {
                ...layerStyles,
                left: -offsetOfHandle.x,
                top: -offsetOfHandle.y,
            };
            return (React.createElement("div", { style: styles, ref: node => {
                    dragPreviewRef = node;
                } }, this.props.renderPreview({})));
        };
        this.renderPreviewInPortal = () => {
            return React.createElement(Portal, null, this.renderPreview());
        };
    }
    render() {
        if (!this.shouldRenderLayer()) {
            return null;
        }
        return this.props.usePortal
            ? this.renderPreviewInPortal()
            : this.renderPreview();
    }
}
export default DragLayer((monitor, props) => {
    onOffsetChange(monitor);
    return {
        offsetOfHandle: props.offsetOfHandle,
        item: monitor.getItem(),
        itemType: monitor.getItemType(),
        isDragging: monitor.isDragging(),
    };
})(CustomDragLayer);
//# sourceMappingURL=DragLayer.js.map