import React from 'react';
import classnames from 'classnames';
import { DragDropContext } from 'react-beautiful-dnd';

import styles from './styles.scss';

import QueuePopup from '../QueuePopup';
import QueueItem from './QueueItem';
import QueueMenu from './QueueMenu';

class PlayQueue extends React.Component {
  constructor(props){
    super(props);
  }

  renderQueueItems() {
    if (!this.props.items) {
      return null;
    }

    return this.props.items.map((el, i) => {
      return (
        <QueuePopup
          trigger={
            <QueueItem
              key={i}
              index={i}
              track={el}
              loading={el.loading}
              current={this.props.currentSong === i}
              musicSourceOrder={this.props.plugins.musicSourceOrder}
              selectSong={this.props.actions.selectSong}
              removeFromQueue={this.props.actions.removeFromQueue}
            />
          }
          track={el}
          musicSources={this.props.plugins.plugins.musicSources}
          musicSourceOrder={this.props.plugins.musicSourceOrder}
          rerollTrack={this.props.actions.rerollTrack}
        />
      );
    });
  }

  render() {
    let {
      compact,
      items,
      settings
    } = this.props;

    let {
      clearQueue,
      addPlaylist,
      toggleOption
    } = this.props.actions;

    return (
      <DragDropContext>
        <div className={classnames(styles.play_queue_container, {'compact': compact})}>
          <QueueMenu
            clearQueue={clearQueue}
            addPlaylist={addPlaylist}
            toggleOption={toggleOption}
            settings={settings}
            items={items}
          />

          <div className={classnames(styles.play_queue_items, styles.fade_in)}>
            {this.renderQueueItems()}
          </div>

        </div>
      </DragDropContext>
    );
  }
}

export default PlayQueue;

@@ -81,16 +81,38 @@
 pContext
+, Droppable, Draggable
  %7D from 
@@ -134,16 +134,16 @@
 l-dnd';%0A
-
 %0Aimport 
@@ -366,32 +366,84 @@
 er(props);%0A  %7D%0A%0A
+  onDragEnd(result) %7B%0A    console.log(result);%0A  %7D%0A%0A
   renderQueueIte
@@ -577,84 +577,333 @@
    %3C
-QueuePopup%0A          trigger=%7B%0A            %3CQueueItem%0A              key=%7Bi%7D%0A
+Draggable key=%7Bi%7D index=%7Bi%7D draggableId=%7Bi%7D%3E%0A          %7B(provided, snapshot) =%3E (%0A            %3Cdiv%0A              ref=%7Bprovided.innerRef%7D%0A              %7B...provided.draggableProps%7D%0A              %7B...provided.dragHandleProps%7D%0A            %3E%0A              %3CQueuePopup%0A                trigger=%7B%0A                  %3CQueueItem%0A      
     
@@ -928,32 +928,38 @@
 %7D%0A              
+    
+  
 track=%7Bel%7D%0A     
@@ -945,32 +945,38 @@
      track=%7Bel%7D%0A
+      
               lo
@@ -1008,16 +1008,22 @@
         
+     
+ 
 current=
@@ -1053,16 +1053,22 @@
  === i%7D%0A
+      
         
@@ -1142,16 +1142,22 @@
         
+     
+ 
 selectSo
@@ -1187,24 +1187,30 @@
 selectSong%7D%0A
+      
             
@@ -1260,24 +1260,30 @@
 eFromQueue%7D%0A
+      
             
@@ -1295,18 +1295,30 @@
         
-%7D%0A
+      %7D%0A      
         
@@ -1332,32 +1332,38 @@
 =%7Bel%7D%0A          
+ 
+     
 musicSources=%7Bth
@@ -1403,32 +1403,38 @@
 rces%7D%0A          
+  
+    
 musicSourceOrder
@@ -1482,16 +1482,22 @@
         
+  
+    
 rerollTr
@@ -1533,33 +1533,92 @@
 lTrack%7D%0A        
-/
+      /%3E%0A            %3C/div%3E%0A          )%7D%0A        %3C/Draggable
 %3E%0A      );%0A    %7D
@@ -1838,24 +1838,51 @@
 gDropContext
+ onDragEnd=%7Bthis.onDragEnd%7D
 %3E%0A        %3Cd
@@ -2181,130 +2181,421 @@
    %3C
-div className=%7Bclassnames(styles.play_queue_items, styles.fade_in)%7D%3E%0A            %7Bthis.renderQueueItems()%7D%0A          %3C/div
+Droppable droppableId=%22play_queue%22%3E%0A            %7B(provided, snapshot) =%3E (%0A              %3Cdiv%0A                ref=%7Bprovided.innerRef%7D%0A                className=%7Bclassnames(styles.play_queue_items, styles.fade_in)%7D%0A                %7B...provided.droppableProps%7D%0A              %3E%0A                %7Bthis.renderQueueItems()%7D%0A                %7Bprovided.placeholder%7D%0A              %3C/div%3E%0A            )%7D%0A          %3C/Droppable
 %3E%0A%0A 

Add react-beautiful-dnd to queue items