ZoomHelpText = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    onAdd: function (map) {
        return L.DomUtil.create('div', 'minzoomhelptext')
    },
    setContent: function (content) {
        this.getContainer().innerHTML = content
    }
})

// See GeometryField source (static/leaflet/leaflet.forms.js) to override more stuff...
MinimumZoomField = L.GeometryField.extend({
  zoomLevelTooLow: function() {
    if (this._controlsShown !== false) {
      this._map.removeControl(this._drawControl)
      this._controlsShown = false
    }

    this._zoomHelpText.setContent(
      django.gettext("Please zoom in further to place a marker on the map.")
    )
  },

  zoomLevelOk: function() {
    if (this._controlsShown !== true) {
      this._map.addControl(this._drawControl)
      this._controlsShown = true
    }

    this._zoomHelpText.setContent(
      django.gettext("Please use the marker tool on the left to select a location.")
    )
  },

  addTo: function (map) {
    // super()
    L.GeometryField.prototype.addTo.call(this, map)
    this._controlsShown = true
    this._map = map

    // Add a help text control
    this._zoomHelpText = new ZoomHelpText().addTo(map)

    // Only allow editing past a certain zoom level (see #56)
    // Remove the edit controls
    this.zoomLevelTooLow()

    // Enable or disable depending on zoom level
    map.addEventListener('zoomend', evt => {
      if (map.getZoom() >= 13) {
        this.zoomLevelOk()
      } else {
        this.zoomLevelTooLow()
      }
    })

    // Respond to underlying text field changing
    const textarea = document.getElementById(this.options.fieldid)
    textarea.addEventListener('change', evt => {
      this.load()
    })

    const triggerChange = evt => {
      document.getElementById('case-study-form').dispatchEvent(new Event('dirty'))
    }
    map.on(L.Draw.Event.CREATED, triggerChange)
    map.on(L.Draw.Event.EDITED, triggerChange)
    map.on(L.Draw.Event.DELETED, triggerChange)
  },
})