const DraggableSquare = () => {
  const { draggable, isDragging } = useDraggable({
    kind: "SQUARE",
    // other fields are optional
  });

  return draggable(<div>{isDragging ? "dragging" : "drag me"}</div>);
};

const { useDraggable, isDragging } = useDraggable({
  // "kind" is the type of the draggable. 
  // Drop targets specify the kind they accept in "accepts" field,
  // The kind can be a string or symbol
  kind: "SQUARE",

  // "data" is the data associated with the draggable.
  // It's visible to drop targets when drag interaction occurs
  data: { color: "red" },

  // It can also be a function that returns the data:
  data: ({ dragElement, dragStartEvent }) => ({ color: "red" }),

  // "shouldDrag" is an optional callback to define if the element
  // should react to drag interactions. It's executed once on drag start
  shouldDrag: ({ event, dragStartEvent, element, data }) => {
    // event: MouseEvent from the pointerdown handler
    // dragStartEvent: MouseEvent from the pointerdown handler
    // element: the element on which the drag interaction occurs
    // data: the data associated with the draggable
    // Must return `true` or `false`
    return true;
  },

  // "disabled" means no drag at all, you know :)
  disabled: false,

  // by default, drag interaction clones the component to the overlay layer
  // "move" means that the component is moved instead of being cloned, so null is rendered instead
  move: true,

  // "component" is a function to get a component that will be shown as draggable
  // "data" is the current data for the draggable
  component: ({ data }) => <Square color="blue" />,

  // "placeholder" is a function to get a component that will be shown in place of draggable component
  // When specified, the "move" option is ignored
  placeholder: ({ data }) => <Square color="gray" />,

  // "offset" determines where to show the dragging component relative the the cursor position
  // If not specified, it computes it in that way, so the component position matches 
  // rendered position before the drag
  offset: { top: 0, left: 0 },

  // alternatively, you can put complex computation of the offset in the function
  // It's called only once when drag starts
  offset: ({ element, event, data }) => {
    // element: native element of draggable
    // event: pointerdown event
    // data: associated data
    return { top: 0, left: 0 };
  },

  // "onDragStart" is optional callback. It's called when drag interaction starts
  onDragStart: ({ event, dragStartEvent, element, data }) => {
    // event: MouseEvent from the pointermove handler
    // dragStartEvent: MouseEvent from the pointerdown handler
    // element: the element on which the drag interaction occurred
    // data: current data of the draggable
  },

  // "onDragMove" is called on every mouse move during the interaction. Don't put expensive logic here
  onDragMove: ({ event, dragStartEvent, element, data, dropTargets, top, left }) => {
    // dropTargets: an array of drop targets where the draggable is currently over
    // top and left: coordinates of rendered draggable element (not mouse coordinates)
  },

  // "onDragEnd" is called when drag interaction ends.
  // "dropTargets" will be empty array if the draggable wasn't dropped
  onDragEnd: ({ event, dragStartEvent, element, data, dropTargets }) => {
    // arguments are all the same as is "onDragMove" except "top" and "left"
  },

  // `mouseConfig` is an option from snapdrag/core
  // See the core documentation for it
  mouseConfig: undefined,

  // `plugins` is also an option from snapdrag/core
  plugins: undefined,
});

const { droppable, hovered } = useDroppable({
  // "accepts" defines the kinds of draggable items this droppable area can accept.
  // It can be a single kind, an array of kinds,
  accepts: "TASK",

  // or be a function that gets "kind" and "data" from draggable and returns bool
  accepts: ({ kind, data,  }) => kind === "TASK" && data.task.project === task.project,

  // "data" is optional and can be used to store additional information related to the droppable area.
  data: { maxCapacity: 5 },

  // "onDragIn" is called when a draggable item of an accepted kind enters the droppable area.
  onDragIn: ({ kind, data, event, element, dropElement, dropTargets }) => {
    // kind: the kind of the draggable
    // data: the data associated with the draggable
    // event: the MouseEvent associated with the drag
    // element: the element being dragged
    // dropElement: the droppable element
    // dropTargets: an array of current drop targets
    console.log(`Draggable ${kind} entered with data`, data);
  },

  // "onDragOut" is called when a draggable item leaves the droppable area.
  onDragOut: ({ kind, data, event, element, dropElement, dropTargets }) => {
    console.log(`Draggable ${kind} left with data`, data);
  },

  // "onDragMove" is called when a draggable item moves within the droppable area.
  onDragMove: ({ kind, data, event, element, dropElement, dropTargets }) => {
    console.log(`Draggable ${kind} moved with data`, data);
  },

  // "onDrop" is called when a draggable item is dropped within the droppable area.
  onDrop: ({ kind, data, event, element, dropElement, dropTargets }) => {
    console.log(`Draggable ${kind} dropped with data`, data);
  },
});