import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'

import { history } from 'app/store'
import { unslugify } from 'app/utils'
import actions from 'app/actions'

class CursorList extends Component {
  state = {
    playing: false,
    play_id: -1,
  }

  constructor(props) {
    super(props)
    this.upload = this.upload.bind(this)
  }

  upload(e) {
    e.preventDefault()
    document.body.className = ''
    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
    let i
    if (!files.length) return
    const promises = Array.from(files).map(file => this.uploadTaggedImage(file, 'cursor', file.filename))
    Promise.all(promises)
    .then(() => {
      this.setState({ status: "" })
    })
  }

  uploadTaggedImage(file, tag, fn) {
    return new Promise((resolve, reject) => {
      this.setState({ status: "Uploading " + tag + "..." })
      const reader = new FileReader()
      reader.onload = fileReaderEvent => {
        reader.onload = null
        const img = new Image()
        img.onload = () => {
          img.onload = null
          upload(img)          
        }
        img.src = fileReaderEvent.target.result
      }
      reader.readAsDataURL(file)

      const upload = img => {
        const uploadData = {
          tag,
          file,
          __file_filename: fn,
          graph_id: this.props.graph.id,
          username: 'swimmer',
          settings: JSON.stringify({
            width: img.naturalWidth,
            height: img.naturalHeight,
          }),
        }
        // console.log(uploadData)
        return actions.upload.upload(uploadData).then(data => {
          // console.log(data)
          resolve({
            ...data.res,
          })
        })
      }
    })
  }

  destroyFile(upload) {
    return new Promise((resolve, reject) => {
      actions.upload.destroy(upload)
      .then(() => {
        console.log('Destroy successful')
        resolve()
      })
      .catch(() => {
        console.log('Error deleting the file')
        reject()
      })
    })
  }

  render() {
    const { playing, play_id } = this.state
    const { graph, onClick } = this.props
    // console.log(graph.uploads)
    return (
      <div className='box cursorList'>
        <div className="uploadButton">
          <button>
            <span>
              {"Upload a cursor"}
            </span>
          </button>
          <input
            type="file"
            accept="image/*"
            onChange={this.upload}
            multiple
          />
        </div>
        <div className='cursors'>
          {graph.uploads.map(upload => (
            upload.tag === 'cursor' && (
              <div className='cursorItem' key={upload.id} onClick={() => onClick && onClick(upload)}>
                <img src={upload.url} alt={upload.fn} />
              </div>
            )
          ))}
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  graph: state.graph.show.res,
})

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(CursorList)