import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from 'styled-components';
import { Delete } from 'styled-icons/typicons/Delete';
import Downloaded from './downloaded';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

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

  return result;
};

const grid = 8;

const getItemStyle = (isDragging, draggableStyle) => ({
  userSelect: "none",
  padding: grid * 2,
  margin: `0 0 ${grid}px 0`,

  background: isDragging ? "blue" : "white",

  ...draggableStyle
});

const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? "lightgrey" : "lightgrey",
  padding: grid,
  width: 700,
  position: 'absolute',
  top: 400
});

const Handle = styled.div`
width: 20px;
height: 20px;
margin-top: 7.5px;
background-color: gray;
border-radius: 4px;
float: left;
`
const LIDelete = styled(Delete)`
width: 20px;
height: 20px;
color: gray;
float: right;
margin-top: -28px;
`

class RBD extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
    this.onDragEnd = this.onDragEnd.bind(this);

    this.inputRef = React.createRef();
    this.removeItem = this.removeItem.bind(this)

    this.state = {
      files: [],
    };

  }


changeCursor = (e) => {
    e.target.style.background = 'red';
  }


handleClick = event => {

  // Helper code to read file and return promise
  const readFile = (file) => {

    // const fileList = [];

    const fileReader = new FileReader();

    // create the promise and return it
    return new Promise((resolve, reject) => {

      // if file reader has an error, report it
      fileReader.onerror = (error) => {
        reject({ error })
      }

      // if success, resolve the promise
      fileReader.onload = (e) => {
        resolve({
          name: file.name.replace( /_|\.mp3/gi, " "),
          link: e.target.result

        })
      }

      // start reading the file
      fileReader.readAsDataURL(file);

    })
  }


  // create all the file reader promises
  // create an array from the files list and use map to generate
  // an array of promises
  const allReaders = Array.from(event.target.files).map(readFile)

  // Now handle the array of promises we just created
  Promise.all(allReaders)
    .then(fileList => {
      console.log(fileList)
      // set the state that we have all the files
      this.setState({ files: fileList });
    })
    .catch(error => {
       console.error(error)
    });

}

  onDragEnd(result) {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const files = reorder(
      this.state.files,
      result.source.index,
      result.destination.index
    );

    this.setState({
      files
    });
  }


  removeItem = (index) => {
    this.setState(({ files }) => ({
      files: files.filter((_, ind) => ind !== index) }));
  }
  render() {
    return (
      <div className="downloadMusic">
        <div className="input">
          <input
            accept="audio/*"
            onChange={this.handleClick}
            id="upload-file"
            className="inputName"
            type="file"
            multiple
            ref={this.inputRef}
          />
          </div>
          <div>{this.state.files.length > 0 && <Downloaded/>}</div>
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="droppable">
            {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                {this.state.files.map((file, index) => (
                  <Draggable key={file.name} draggableId={file.name} index={index}>
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}


                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                      <div className="handle">
                      <Handle {...provided.dragHandleProps}/>
                      </div>
                      <div>
                         <form>
  <label>
   <p> &nbsp;<input type="text" defaultValue={file.name} name="name" style={{width:'600px', height:'30px', fontSize: '16px'}} /></p>
  </label>
</form>

                      </div>
                      <div className="delete">
                       <LIDelete onClick = {() => this.removeItem(index)}/>
                       </div>
                     </div>

                    )}
                  </Draggable>

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


export default RBD;