# --- IMPORTANT ---
#
# You must assume that the page has inputs to receive the dimensions and the ratio!
#
# --- IMPORTANT ---

class App.Cropper
  # Variables
  @croppieInstance = undefined
  @originalHeight = undefined
  @originalWidth = undefined

  constructor: (@img, @cropButton, @cancelButton, @initCropButton, @targetDiv, @uploadInput) ->

  # Initialize croppie
  initCroppie: ->
    @croppieInstance?.croppie('destroy')
    @croppieInstance = $(@img).croppie
      enableExif: true,
      viewport:
        width: 542,
        height: 285
      ,
      boundary:
        width: 582,
        height: 510
    cropMode()
    return

  # Show the crop button
  normalMode: ->
    $(@initCropButton).show()
    $(@cropButton).hide()
    $(@cancelButton).hide()

  # Show the confirm and cancel crop buttons
  cropMode: ->
    $(@initCropButton).hide()
    $(@cropButton).show()
    $(@cancelButton).show()

  uploadAndEdit: (input) ->
    _URL = window.URL || window.webkitURL

    files = input.target.files

    if files[0].type.match('image.*')
      reader = new FileReader
      img = new Image

      reader.onload = (e) ->
        $(@img).attr('src', e.target.result)
        @croppieInstance.croppie('bind', url: e.target.result ).then ->
          console.log 'Bind feito!'

      reader.readAsDataURL(files[0])

      img.onload = ->
        height = this.naturalHeight || this.height
        width = this.naturalWidth || this.width

        console.log "Altura original: #{height}, comprimento original: #{width}"

        @originalHeight = height
        @originalWidth = width

        img.src = _URL.createObjectURL(files[0])

      cropMode()
    else
      swal("Eita!", "Desculpe, mas seu browser não suporta nosso upload de imagens :(", "error")

  cropImage: ->
    cropMode()

    @croppieInstance.croppie 'result',
      type: 'canvas'
      size: 'viewport'
      quality: 1
    .then (resp) ->
      $(@img).attr('src', resp)

      cropResults = @croppieInstance.croppie('get')
      console.log cropResults.points

      cropW = parseInt(cropResults.points[2]) - parseInt(cropResults.points[0])
      cropH = parseInt(cropResults.points[3]) - parseInt(cropResults.points[1])

      console.log "Altura do crop: #{cropH} comprimento do crop: #{cropW}"

      ratio = [@originalWidth / cropW, @originalHeight / cropH]
      console.log "Ratio array: #{ratio}"
      ratio = Math.floor(Math.min(ratio[0], ratio[1]))
      $('#ratio').val(ratio)

      console.log "Ratio: #{ratio}"
      $('#crop_x').val(parseInt(cropResults.points[0]) * ratio)
      $('#crop_y').val(parseInt(cropResults.points[1]) * ratio)
      $('#crop_h').val(cropH * ratio)
      $('#crop_w').val(cropW * ratio)

      normalMode()

      destroyInstance()

  destroyInstance: ->
    @croppieInstance.croppie('destroy')
    $(@img).detach().prependTo(@targetDiv)

$(document).on 'turbolinks:load', ->
  return unless $('.party-templates-edit').length > 0
  cropper = new App.Cropper(
    '#file-1imgid',
    '#crop-ok',
    '#crop-cancel',
    '#crop-init',
    '#cover-img-preview',
    '#party_cover'
  )

  # Initialize croppie
  $(cropper.initCropButton).click (evt) ->
    evt.preventDefault()

    cropper.initCroppie()


  $(cropper.cancelButton).click (evt) ->
    evt.preventDefault()

    cropper.normalMode()
    cropper.destroyInstance()

  # Init croppie on new image
  $(cropper.uploadInput).change (evt) ->
    cropper.initCroppie()
    cropper.uploadAndEdit(evt)

  # Get the result of the crop
  $(cropper.cropButton).click (evt) ->
    evt.preventDefault()

    cropper.cropImage()