/// <reference types="react" />
import React from 'react';
type ReactProps = Object;

type DraggableType =
    string |
    symbol |
    ((props: ReactProps) => string | symbol);

type DraggableSpec = {
    beginDrag: (
        props: ReactProps,
        monitor: DraggableMonitor,
        component: React.ReactNode
    ) => Object;

    endDrag?: (
        props: ReactProps,
        monitor: DraggableMonitor,
        component: React.ReactNode
    ) => void;

    canDrag?: (
        props: ReactProps,
        monitor: DraggableMonitor
    ) => boolean;

    isDragging?: (
        props: Object,
        monitor: DraggableMonitor
    ) => boolean;
};

type DraggableOptions = {
    arePropsEqual?: (Object, Object) => boolean
};

type dragPreview = (elementOrNode: HTMLElement | React.ReactNode) => React.ReactNode;
type DraggableConnector = {
    dragSource: () => (elementOrNode: HTMLElement | React.ReactNode, options?: { dropEffect: string }) => React.ReactNode,
    dragPreview: () => dragPreview
}

type Offset = { x: number, y: number };

type DraggableMonitor = {
    canDrag: () => boolean;
    isDragging: () => boolean;
    getItemType: () => null | DraggableType;
    getItem: () => null | Object;
    getDropResult: () => null | Object;
    didDrop: () => boolean;
    getInitialClientOffset: () => null | Offset;
    getInitialSourceClientOffset: () => null | Offset;
    getClientOffset: () => null | Offset;
    getDifferenceFromInitialOffset: () => null | Offset;
    getSourceClientOffset: () => null | Offset;
}

export interface DraggableProps {
    type: DraggableType;
    spec?: DraggableSpec;
    collect?: (connect: DraggableConnector, monitor: DraggableMonitor) => Object;
    options?: DraggableOptions;
    layer?: undefined | false | React.ReactNode;
    following?: false | true;
    render?: ({ connectDragPreview: dragPreview, isDragging: boolean, style: Object, otherDragProps }) => React.ReactNode;
}

export default class Draggable extends React.Component<DraggableProps, any>{
    render(): JSX.Element;
}