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 = {
    loading: false,
  }

  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.uploadSize = this.uploadSize.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) {
    const { data } = this.props
    this.setState({ loading: true })
    // first, upload all the fullsize files
    let fullsizeUploadPromises = files.map(file => {
      return this.uploadSize(file, 'fullsize')
    })
    // when these are done
    Promise.all(fullsizeUploadPromises)
    .then(results => {
      // get the added IDs in order 
      const added_image_order = results.map(result => result.id)
      // append the new IDs to the image order
      const new_image_order = (data.settings.image_order || []).concat(added_image_order)
      // add the images to the lookup
      const image_lookup = results.reduce((a,b) => {
        a[b.id] = b
        return a
      }, (data.settings.image_lookup || {}))
      // add these images to the settings object
      this.handleSettingsChange('multiple', {
        image_order: new_image_order,
        image_lookup: image_lookup,
        thumbnail_lookup: data.settings.thumbnail_lookup || {},
      })
      // construct thumbnails and upload these
      const thumbnailUploadPromises = files.map(file => {
        return this.uploadThumbnail(file)
      })
      // once the thumbnails are done uploading
      Promise.all(thumbnailUploadPromises)
      .then(thumbnail_results => {
        // add them to the thumbnail lookup, keyed off the ID of the fullsize image
        const thumbnail_lookup = thumbnail_results.reduce((a, b, i) => {
          const id = added_image_order[i]
          a[id] = b
          return a
        }, (data.settings.thumbnail_lookup || {}))
        // update the settings object
        this.handleSettingsChange('multiple', {
          thumbnail_lookup: thumbnail_lookup,
        })
        this.setState({ loading: false })
      })
    })
  }

  uploadThumbnail(file) {
    return new Promise((resolve, reject) => {
      const type = (file.name.match('.png') !== -1) ? 'image/png' : 'image/jpg'
      const fr = new FileReader()
      fr.onload = fileReaderEvent => {
        fr.onload = null
        const image = new Image()
        image.onload = () => {
          image.onload = null
          const thumbnailCanvas = renderThumbnail(image, { maxSide: THUMBNAIL_SIZE })
          thumbnailCanvas.toBlob(thumbnail => {
            this.uploadSize(thumbnail, 'thumbnail', file.name)
            .then(res => {
              resolve(res)
            })
            .catch(err => {
              reject(err)
            })
          }, type, THUMBNAIL_QUALITY)
        }
        image.src = fileReaderEvent.target.result
      }
      fr.readAsDataURL(file)
    })
  }

  uploadSize(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) {
    console.log(image_order)
    // if (image_order !== this.props.data.settings.image_order) {
      // console.log('handle order chagned', 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}
        />
        {this.state.loading && <Loader />}
        {image_order && image_order.length &&
          <ReactSortable
            list={image_order.map(id => ({ id }))}
            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={thumbnail_lookup[image_id]}
              />
            ))}
          </ReactSortable>
        }
      </div>
    )
  }
}

const GalleryImageForm = ({ id, key, image, thumbnail }) => {
  console.log(image, thumbnail)
  return (
    <div>
      {thumbnail
        ? <img src={thumbnail.url} />
        : <Loader />
      }
    </div>
  )
}

/*
*/