import React, { useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";

function App() {
  const [items, updateItems] = useState([1, 2, 3, 4, 5]);
  const [selected, updateSelected] = useState([6, 7, 8]);

  const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
  };

  const onDragEnd = result => {
    if (!result.destination) return;
    if (result.source.droppableId === result.destination.droppableId) {
      if (result.source.droppableId === "items") {
        const list = reorder(
          items,
          result.source.index,
          result.destination.index
        );
        updateItems(list);
      } else {
        const list = reorder(
          selected,
          result.source.index,
          result.destination.index
        );
        updateSelected(list);
      }
    } else {
      const r = move(
        result.source.droppableId === "items" ? items : selected,
        result.destination.droppableId === "items" ? items : selected,
        result.source,
        result.destination
      );
      updateItems(r.items);
      updateSelected(r.selected);
    }
  };

  const move = (source, destination, droppableSource, droppableDestination) => {
    const sourceClone = Array.from(source);
    const destClone = Array.from(destination);
    const [removed] = sourceClone.splice(droppableSource.index, 1);

    destClone.splice(droppableDestination.index, 0, removed);

    const result = {};
    result[droppableSource.droppableId] = sourceClone;
    result[droppableDestination.droppableId] = destClone;

    return result;
  };

  return (
    <div
      style={{
        display: "flex",
        "justify-content": "space-between",
        width: "50vw",
        margin: "auto",
        marginTop: 24
      }}
    >
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="items">
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={{
                background: snapshot.isDraggingOver ? "lightblue" : "lightgrey",
                padding: 8,
                width: 250
              }}
            >
              <h2>Items</h2>
              {items.map((item, index) => (
                <Draggable key={item} draggableId={item} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        userSelect: "none",
                        padding: 16,
                        margin: "0 0 8px 0",
                        background: snapshot.isDragging ? "lightgreen" : "grey",

                        ...provided.draggableProps.style
                      }}
                    >
                      Test {item}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>

        <Droppable droppableId="selected">
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={{
                background: snapshot.isDraggingOver ? "lightblue" : "lightgrey",
                padding: 8,
                width: 250
              }}
            >
              <h2>Selected</h2>
              {selected.map((item, index) => (
                <Draggable key={item} draggableId={item} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        userSelect: "none",
                        padding: 16,
                        margin: "0 0 8px 0",
                        background: snapshot.isDragging ? "lightgreen" : "grey",

                        ...provided.draggableProps.style
                      }}
                    >
                      Test {item}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

export default App;