import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { ReactSortable } from "react-sortablejs"

import { session } from 'app/session'
import actions from 'app/actions'
import { capitalize, preloadImage } from 'app/utils'

import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
import { renderThumbnail } from 'app/common/upload.helpers'

const DISPLAY_SIZE = 2000
const DISPLAY_QUALITY= 80
const THUMBNAIL_SIZE = 320
const THUMBNAIL_QUALITY = 80

export default class MediaGalleryForm extends Component {
  state = {
    img: null,
  }

  constructor(props) {
    super(props)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSettingsChange = this.handleSettingsChange.bind(this)
    this.handleUpload = this.handleUpload.bind(this)
    this.replaceTaggedSize = this.replaceTaggedSize.bind(this)
    this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
  }

  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }

  handleSelect(name, value) {
    this.props.onSelect(name, value)
  }

  handleSettingsChange(name, value) {
    this.props.onSettingsChange(name, value)
  }

  handleUpload(files) {
    // this.uploadThumbnail(img)
  }

  uploadThumbnail(img) {
    const { fn } = this.props.data.settings.fullsize
    const thumbnailCanvas = renderThumbnail(img, { maxSide: THUMBNAIL_SIZE })
    thumbnailCanvas.toBlob(thumbnail => {
      this.replaceTaggedSize(thumbnail, 'thumbnail', fn).then(data => {
        this.props.onSettingsChange('multiple', {
          thumbnail: data,
        })
      })
    }, 'image/jpeg', THUMBNAIL_QUALITY)
  }

  replaceTaggedSize(image, tag, fn) {
    // when we upload an image, if the image already exists in this "position"
    // on the record, we should also delete it
    if (this.props.data.settings[tag] && this.props.data.settings[tag].id) {
      return new Promise((resolve, reject) => {
        actions.upload.destroy(this.props.data.settings[tag])
        .then(() => {
          console.log('destroy successful')
          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
        })
        .catch(() => {
          console.log('error deleting the image')
          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
        })
      })
    }
    return this.uploadTaggedSize(image, tag, fn)
  }

  uploadTaggedSize(image, tag, fn) {
    console.log('uploading size', tag)
    const uploadData = {
      image,
      tag,
      username: 'animism',
    }
    if (fn) {
      uploadData['__image_filename'] = fn
    }
    // console.log(uploadData)
    return actions.upload.upload(uploadData).then(data => {
      // console.log(data)
      return data.res
    })
  }

  handleOrderChanged(image_order) {
    this.handleSettingsChange('image_order', image_order)
  }

  render() {
    const { data } = this.props
    const { image_order, image_lookup, thumbnail_lookup } = data.settings
    // console.log(data)
    return (
      <div className='galleryForm'>
        <FileInputField
          multiple
          title="Upload images"
          mime="*/*"
          onChange={this.handleUpload}
        />
        <ReactSortable
          list={image_order || []}
          setList={new_order => this.handleOrderChanged(new_order)}
        >
          {(image_order || []).map(image_id => {
            <GalleryImageForm
              id={image_id}
              key={image_id}
              image={image_lookup[image_id]}
              thumbnail={image_lookup[image_id]}
            />
          })}
        </ReactSortable>
      </div>
    )
  }
}

const GalleryImageForm =({ id, key, image, thumbnail }) => {
  return (
    <div />
  )
}