 LoadingIndicator = require './loading-indicator'
 toBlob = require 'data-uri-to-blob'
 
-BASE_64_PNG_HEAD = 'data:image/png;base64,'
-BASE_64_JPEG_HEAD = 'data:image/jpeg;base64,'
 BASE_64_EXPANSION = 3 / 4
+
+DEFAULT_STYLE =
+  display: 'inline-block'
+  minHeight: '1em'
+  background: 'rgba(128, 128, 128, 0.2)'
+  border: '1px solid rgba(128, 128, 128, 0.4)'
+  borderRadius: 5
+  position: 'relative'
 
 module.exports = React.createClass
   displayName: 'ImageSelector'

  handleChange: (e) ->
    [file] = e.target.files

    @setState
      working: true
      format: ''
      size: NaN

    reader = new FileReader
    reader.onload = (e) =>
      img = new Image
      img.title = file.name
      img.onload = =>
        @cropImage img
      img.src = e.target.result
    reader.readAsDataURL file

  cropImage: (srcImg) ->
    canvas = document.createElement 'canvas'
    canvas.width = srcImg.naturalWidth
    canvas.height = srcImg.naturalHeight

    ctx = canvas.getContext '2d'
    ctx.drawImage img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height

    dataURL = canvas.toDataURL srcFile.type
    @setState {dataURL}

    try
      size = dataURL.split(';base64,')[1].length * BASE_64_EXPANSION

      if size > @props.maxSize and canvas.width * canvas.height > @props.minArea
        # Keep trying until it's small enough.
        @reduceImage img, srcFile, _scale - @props.reductionPerPass
      else
        @setState working: false

        img.title = srcFile.name
        @props.onChange toBlob(dataURL), img

    catch
      @setState
        dataURL: ''
        working: false

      alert 'Error reducing image. Try a smaller one.'
