import React, { Component } from "react";
import ReactDOM from "react-dom";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";






export default function DragAndDrop(){
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     items: [ {id: "item-0", content: "item 0"},
  //     {id: "item-1", content: "item 1"}
  //     ,{id: "item-2", content: "item 2"}
  //     ,{id: "item-3", content: "item 3"}
  //     ,{id: "item-4", content: "item 4"}]
  //   };

  //   this.onDragEnd = this.onDragEnd.bind(this);
  // }

  const [items, setItems] = React.useState([ {id: "item-0", content: "item 0"},
  {id: "item-1", content: "item 1"}
  ,{id: "item-2", content: "item 2"}
  ,{id: "item-3", content: "item 3"}
  ,{id: "item-4", content: "item 4"}])


 function onDragEnd(result) {
    if (!result.destination) {
      return;
    }
    var itemgg = [...items]
    const itemF = reorder(
      itemgg,
      result.source.index,
      result.destination.index
    );
    setItems(itemF)
  }
  
  const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
  };

    return (
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
            >
              {items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}

                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
}