metamaps/metamaps

/* global $ */

import outdent from 'outdent'

import Active from '../Active'
import DataModel from '../DataModel'
import DataModelMap from '../DataModel/Map'
import GlobalUI from './index'

const CreateMap = {
  newMap: null,
  emptyMapForm: '',
  emptyForkMapForm: '',
  topicsToMap: [],
  synapsesToMap: [],
  init: function() {
    var self = CreateMap

    self.newMap = new DataModelMap({ permission: 'commons' })

    self.bindFormEvents()

    self.emptyMapForm = $('#new_map').html()
  },
  bindFormEvents: function() {
    var self = CreateMap

    $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
      if (event.keyCode === 13) self.submit()
    })

    $('.new_map button.cancel').unbind().bind('click', function(event) {
      event.preventDefault()
      GlobalUI.closeLightbox()
    })
    $('.new_map button.submitMap').unbind().bind('click', self.submit)

    // bind permission changer events on the createMap form
    $('.permIcon').unbind().bind('click', self.switchPermission)
  },
  closeSuccess: function() {
    $('#mapCreatedSuccess').fadeOut(300, function() {
      $(this).remove()
    })
  },
  switchPermission: function() {
    var self = CreateMap

    self.newMap.set('permission', $(this).attr('data-permission'))
    $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected')
    $(this).find('.mapPermIcon').addClass('selected')

    var permText = $(this).find('.tip').html()
    $(this).parents('.new_map').find('.permText').html(permText)
  },
  submit: function(event) {
    if (event) event.preventDefault()

    var self = CreateMap

    if (GlobalUI.lightbox === 'forkmap') {
      self.newMap.set('topicsToMap', self.topicsToMap)
      self.newMap.set('synapsesToMap', self.synapsesToMap)
      if (Active.Map) self.newMap.set('source_id', Active.Map.id)
    }

    var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
    var $form = $(formId)

    self.newMap.set('name', $form.find('#map_name').val())
    self.newMap.set('desc', $form.find('#map_desc').val())

    if (self.newMap.get('name').length === 0) {
      self.throwMapNameError()
      return
    }

    self.newMap.save(null, {
      success: self.success
    // TODO add error message
    })

    GlobalUI.closeLightbox()
    GlobalUI.notifyUser('Working...')
  },
  throwMapNameError: function() {
    var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
    var $form = $(formId)

    var message = $("<div class='feedback_message'>Please enter a map name...</div>")

    $form.find('#map_name').after(message)
    setTimeout(function() {
      message.fadeOut('fast', function() {
        message.remove()
      })
    }, 5000)
  },
  success: function(model) {
    // push the new map onto the collection of 'my maps'
    DataModel.Maps.Mine.add(model)
    if (Active.Mapper.get('follow_map_on_created')) {
      Active.Mapper.followMap(model.id)
    }

    GlobalUI.clearNotify()
    $('#wrapper').append(outdent`
      <div id="mapCreatedSuccess">
        <h6>SUCCESS!</h6>
        Your map has been created. Do you want to:
        <a id="mapGo" href="/maps/${model.id}">Go to your new map</a>
        <span>OR</span>
        <a id="mapStay" href="#">Stay on this ${Active.Map ? 'map' : 'page'}</a>
      </div>
    `)
    $('#mapGo').click(e => GlobalUI.CreateMap.closeSuccess())
    $('#mapStay').click(e => {
      GlobalUI.CreateMap.closeSuccess()
      return false
    })
  },
  reset: function(id) {
    var self = CreateMap

    var form = $('#' + id)

    if (id === 'fork_map') {
      self.topicsToMap = []
      self.synapsesToMap = []
      form.html(self.emptyForkMapForm)
    } else {
      form.html(self.emptyMapForm)
    }

    self.bindFormEvents()
    self.newMap = new DataModel.Map({ permission: 'commons' })

    return false
  }
}

export default CreateMap