import React, { Component } from "react";
import { DragDropContext } from "react-beautiful-dnd";
import { Grid, Row } from "react-bootstrap";
import DroppableContainer from "./DroppableContainer";

const testData = {
  container1Data: [
    { id: 1, name: "item 1" },
    { id: 2, name: "item 2" },
    { id: 3, name: "item 3" },
    { id: 4, name: "item 4" },
    { id: 5, name: "item 5" },
    { id: 6, name: "item 6" }
  ],
  container2Data: [
    { id: 101, name: "other item 1" },
    { id: 102, name: "other item 2" }
  ]
};

export default class Workspace extends Component {
  state = {
    container1Data: testData.container1Data,
    container2Data: testData.container2Data
  };

  onDragEnd = ({ destination, source }) => {
    if (
      !destination ||
      destination.droppableId !== "Container2" ||
      (destination.droppableId === source.droppableId &&
        destination.index === source.index)
    ) {
      return;
    }

    this.setState(prevState => {
      const addItem = prevState.container1Data.splice(source.index, 1);
      prevState.container2Data.splice(destination.index, 0, ...addItem);

      return {
        container1Data: [...prevState.container1Data],
        container2Data: [...prevState.container2Data]
      };
    });
  };

  render = () => (
    
      
        
          
          
        
      
    
  );
}