path: root/animism-align/frontend/app/views/media/components/media.formGallery.js

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

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

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

import GalleryImageForm from './media.formGalleryImage'

export default class MediaGalleryForm extends Component {
  state = {
    loading: false,
    edit_image_id: 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.uploadSize = this.uploadSize.bind(this)
    this.handleSaveItem = this.handleSaveItem.bind(this)
    this.handleUploadGalleryThumbnail = this.handleUploadGalleryThumbnail.bind(this)
    this.handleDestroyGalleryThumbnail = this.handleDestroyGalleryThumbnail.bind(this)
  }

  componentDidMount() {
    const { data } = this.props
    this.handleSettingsChange('multiple', {
      image_order: data.settings.image_order || [],
      image_lookup: data.settings.image_lookup || {},
      caption_lookup: data.settings.caption_lookup || {},
      thumbnail_lookup: data.settings.thumbnail_lookup || {},
    })
  }

  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 })
    this.uploadFullsize(files)
    .then(() => {
      this.setState({ loading: false })
    })
  }

  handleUploadGalleryThumbnail(file) {
    this.setState({ loading: true })
    if (this.props.data.thumbnail) {
      this.handleDestroyGalleryThumbnail()
    }
    this.uploadThumbnail(file, 'thumbnail', THUMBNAIL_SIZE, THUMBNAIL_QUALITY)
    .then(data => {
      console.log(data)
      this.handleSettingsChange('multiple', {
        thumbnail: data,
      })
      this.setState({ loading: false })
    })
  }

  handleDestroyGalleryThumbnail(e) {
    if (e) {
      e.preventDefault()
      e.stopPropagation()
    }
    actions.upload.destroy({ id: this.props.data.thumbnail.id })
  }

  uploadFullsize(files) {
    const { data } = this.props
    // first, upload all the fullsize files
    let fullsizeUploadPromises = files.map(file => {
      return this.uploadSize(file, 'fullsize')
    })
    // when these are done
    return 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,
        caption_lookup: data.settings.caption_lookup || {},
        thumbnail_lookup: data.settings.thumbnail_lookup || {},
      })
      return this.uploadResizedFiles(files, added_image_order)
    })
  }

  uploadResizedFiles(files, added_image_order) {
    return (
      this.uploadThumbnails(files, added_image_order, 'thumbnail', THUMBNAIL_SIZE, THUMBNAIL_QUALITY)
      .then(() => {
        return this.uploadThumbnails(files, added_image_order, 'display', DISPLAY_SIZE, DISPLAY_QUALITY)
      })
    )
  }

  uploadThumbnails(files, added_image_order, tag, maxSide, quality) {
    const { data } = this.props
    // construct thumbnails and upload these
    const thumbnailUploadPromises = files.map(file => {
      return this.uploadThumbnail(file, tag, maxSide, quality)
    })
    // once the thumbnails are done uploading...
    return Promise.all(thumbnailUploadPromises).then(thumbnail_results => {
      // decide which lookup we're adding to
      const tag_lookup_name = tag + '_lookup'
      const tag_lookup = data.settings[tag_lookup_name] || {}
      // 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
      }, tag_lookup)
      // update the settings object
      this.handleSettingsChange('multiple', {
        [tag_lookup_name]: thumbnail_lookup,
      })
    })
  }

  uploadThumbnail(file, tag, maxSide, quality) {
    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 })
          thumbnailCanvas.toBlob(thumbnail => {
            this.uploadSize(thumbnail, tag, file.name)
            .then(res => {
              resolve(res)
            })
            .catch(err => {
              reject(err)
            })
          }, type, 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(new_image_order) {
    // console.log(new_image_order)
    const image_order = new_image_order.map(el => el.id)
    if (!simpleArraysEqual(image_order, this.props.data.settings.image_order)) {
      this.handleSettingsChange('image_order', image_order)
    }
  }

  handleSaveItem(id, item, editNext) {
    if (!id) {
      this.setState({ edit_image_id: null })
    }
    const caption_lookup = this.props.data.settings.caption_lookup || {}
    caption_lookup[id] = item
    this.handleSettingsChange('caption_lookup', caption_lookup)
    if (editNext) {
      const image_order = this.props.data.settings.image_order
      const index = image_order.indexOf(id) + 1
      if (index < image_order.length) {
        this.setState({ edit_image_id: image_order[index] })
      } else {
        this.setState({ edit_image_id: null })
      }
    } else {
      this.setState({ edit_image_id: null })
    }
  }

  handleDeleteItem(id) {
    let { image_order, image_lookup, thumbnail_lookup, display_lookup, caption_lookup } = this.props.data.settings
    const new_image_order = image_order.filter(n => n !== id)
    caption_lookup = caption_lookup || {}
    const image_lookup_upload_id = ((image_lookup && image_lookup[id]) || {}).id
    if (image_lookup_upload_id) {
      actions.upload.destroy({ id: image_lookup_upload_id })
    }
    const thumbnail_lookup_upload_id = ((thumbnail_lookup && thumbnail_lookup[id]) || {}).id
    if (thumbnail_lookup_upload_id) {
      actions.upload.destroy({ id: thumbnail_lookup_upload_id })
    }
    const display_lookup_upload_id = ((display_lookup && display_lookup[id]) || {}).id
    if (display_lookup_upload_id) {
      actions.upload.destroy({ id: display_lookup_upload_id })
    }
    image_lookup && delete image_lookup[id]
    thumbnail_lookup && delete thumbnail_lookup[id]
    display_lookup && delete display_lookup[id]
    caption_lookup && delete caption_lookup[id]
    this.handleSettingsChange('multiple', {
      image_order: new_image_order,
      image_lookup: { ...image_lookup },
      thumbnail_lookup: { ...thumbnail_lookup },
      display_lookup: { ...display_lookup },
      caption_lookup: { ...caption_lookup },
    })
  }

  render() {
    const { data } = this.props
    const { image_order, image_lookup, thumbnail_lookup, caption_lookup } = data.settings
    const { loading, edit_image_id } = this.state
    // console.log(data)
    return (
      <div className='galleryForm'>
        <FileInputField
          multiple
          title="Upload images"
          mime="*/*"
          onChange={this.handleUpload}
        />
        {loading && <Loader />}
        {image_order && image_order.length &&
          <ReactSortable
            className='galleryList'
            list={image_order.map(id => ({ id }))}
            setList={new_order => this.handleOrderChanged(new_order)}
          >
            {image_order.map(image_id => (
              <GalleryListItem
                id={image_id}
                key={image_id}
                image={image_lookup[image_id]}
                thumbnail={thumbnail_lookup[image_id]}
                onEdit={e => {
                  e.preventDefault()
                  e.stopPropagation()
                  this.setState({ edit_image_id: image_id })
                }}
                onDestroy={e => {
                  e.preventDefault()
                  e.stopPropagation()
                  this.handleDeleteItem(image_id)
                }}
              />
            ))}
          </ReactSortable>
        }
        {edit_image_id &&
          <GalleryImageForm
            id={edit_image_id}
            initialData={initialCaptionData(caption_lookup, edit_image_id)}
            thumbnail={thumbnail_lookup[edit_image_id]}
            onSave={this.handleSaveItem}
          />
        }
        <FileInputField
          title="Upload thumbnail"
          mime="*/*"
          onChange={this.handleUploadGalleryThumbnail}
        />
        {data.settings.thumbnail &&
          <div className='label'>
            <span>Thumbnail</span>
            <img src={data.settings.thumbnail.url} />
            <button onClick={this.handleDestroyGalleryThumbnail}>x</button>
          </div>
        }
      </div>
    )
  }
}

const initialCaptionData = (caption_lookup, image_id) => {
  caption_lookup = caption_lookup || {}
  return caption_lookup[image_id] || {}
}

const GalleryListItem = ({ id, key, image, thumbnail, onEdit, onDestroy }) => {
  // console.log(image, thumbnail)
  return (
    <div className='galleryListItem'>
      {thumbnail
        ? (
          <div>
            <div><img src={thumbnail.url} /></div>
            <button onClick={onEdit}>Edit</button>
            <button onClick={onDestroy}>x</button>
          </div>
        ) : <Loader />
      }
    </div>
  )
}