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

import { session } from 'app/session'
import actions from 'app/actions'
import { capitalize } from 'app/utils'
import { preloadImage, cropImage } from 'app/utils/image.utils'
import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants'

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

import ImageSelection from './media.formImageSelection'

export default class MediaImageForm 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.handleCrop = this.handleCrop.bind(this)
    this.replaceTaggedSize = this.replaceTaggedSize.bind(this)
    this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
  }

  componentDidMount() {
    // this.setState({ })
    if (this.props.data.settings.fullsize) {
      preloadImage(this.props.data.settings.fullsize.url)
      .then(img => this.setState({ img }))
    }
  }

  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({ file, img, canvas, blob }) {
    // sizes: fullsize, display, thumbnail
    this.replaceTaggedSize(file, 'fullsize')
    .then(data => {
      this.setState({ img })
      this.props.onSettingsChange('multiple', {
        fullsize: data,
        crop: {},
      })
      return this.replaceTaggedSize(blob, 'display', file.name)
    }).then(data => {
      this.props.onSettingsChange('multiple', {
        display: data,
      })
      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
    })
  }

  handleCrop(crop) {
    // when cropping an image, re-upload the display image and thumbnail
    // console.log(crop)
    cropImage(this.state.img, crop, DISPLAY_SIZE)
    .then(canvas => {
      canvas.toBlob(blob => {
        // console.log(canvas, canvas.width, canvas.height, blob)
        this.replaceTaggedSize(blob, 'display', this.props.data.settings.fullsize.fn)
        .then(data => {
          this.props.onSettingsChange('multiple', {
            crop,
            display: data,
          })
          this.uploadThumbnail(canvas)
        })
      }, 'image/jpeg', DISPLAY_QUALITY)
    })
  }
  
  render() {
    const { data } = this.props
    // console.log(data)
    return (
      <div className='imageForm'>
        {!data.url &&
          <label className={'text fileInput'}>
            <span>{"Upload image"}</span>
            <div className="row">
              <button>
                {"Choose image"}
              </button>
              <UploadImage
                onUpload={this.handleUpload}
                maxSide={DISPLAY_SIZE}
                quality={DISPLAY_QUALITY}
              />
            </div>
          </label>
        }
        {data.settings.fullsize &&
          <div>
            <ImageSelection
              url={data.settings.fullsize.url}
              crop={data.settings.crop}
              onCrop={this.handleCrop}
            />
          </div>
        }
      </div>
    )
  }
}