'use strict'
import Rbush from 'rbush'

function init(L) {
    var CanvasIconLayer = (L.Layer ? L.Layer : L.Class).extend({

        // Add event listeners to initialized section.
        initialize: function(options) {
            L.setOptions(this, options)
            this._onClickListeners = []
            this._onHoverListeners = []
        },

        setOptions: function(options) {
            L.setOptions(this, options)
            return this.redraw()
        },
        redraw: function() {
            this._redraw(true)
        },

        // Multiple layers at a time for rBush performance
        addMarkers: function(markers) {
            var self = this
            var tmpMark = []
            var tmpLatLng = []

            markers.forEach(function(marker) {
                if (!((marker.options.pane === 'markerPane') && marker.options.icon)) {
                    console.error('Layer isn\'t a marker')
                    return
                }

                var latlng = marker.getLatLng()
                var isDisplaying = self._map.getBounds().contains(latlng)
                var s = self._addMarker(marker, latlng, isDisplaying)

                // Only add to Point Lookup if we are on map
                if (isDisplaying === true) tmpMark.push(s[0])

                tmpLatLng.push(s[1])
            })

            self._markers.load(tmpMark)
            self._latlngMarkers.load(tmpLatLng)
        },

        // Adds single layer at a time. Less efficient for rBush
        addMarker: function(marker) {
            var self = this
            var latlng = marker.getLatLng()
            var isDisplaying = self._map.getBounds().contains(latlng)
            var dat = self._addMarker(marker, latlng, isDisplaying)

            // Only add to Point Lookup if we are on map
            if (isDisplaying === true) self._markers.insert(dat[0])

            self._latlngMarkers.insert(dat[1])
        },

        addLayer: function(layer) {
            if ((layer.options.pane === 'markerPane') && layer.options.icon) this.addMarker(layer)
            else console.error('Layer isn\'t a marker')
        },

        addLayers: function(layers) {
            this.addMarkers(layers)
        },

        removeLayer: function(layer) {
            this.removeMarker(layer, true)
        },

        removeMarker: function(marker, redraw) {
            var self = this

            // If we are removed point
            if (marker['minX']) marker = marker.data

            var latlng = marker.getLatLng()
            var isDisplaying = self._map.getBounds().contains(latlng)

            var markerData = {

                minX: latlng.lng,
                minY: latlng.lat,
                maxX: latlng.lng,
                maxY: latlng.lat,
                data: marker
            }

            self._latlngMarkers.remove(markerData, function(a, b) {
                return a.data._leaflet_id === b.data._leaflet_id
            })

            self._latlngMarkers.total--
            self._latlngMarkers.dirty++

            if (isDisplaying === true && redraw === true) {
                self._redraw(true)
            }
        },

        onAdd: function(map) {
            this._map = map

            if (!this._canvas) this._initCanvas()

            if (this.options.pane) this.getPane().appendChild(this._canvas)
            else map._panes.overlayPane.appendChild(this._canvas)

            map.on('moveend', this._reset, this)
            map.on('resize', this._reset, this)

            map.on('click', this._executeListeners, this)
            map.on('mousemove', this._executeListeners, this)
            map.on('zoomstart', this._canvasHide, this)
            map.on('zoomend', this._canvasShow, this)
        },

        onRemove: function(map) {
            if (this.options.pane) this.getPane().removeChild(this._canvas)
            else map.getPanes().overlayPane.removeChild(this._canvas)

            map.off('click', this._executeListeners, this)
            map.off('mousemove', this._executeListeners, this)

            map.off('moveend', this._reset, this)
            map.off('resize', this._reset, this)
            map.off('zoomstart', this._canvasHide, this)
            map.off('zoomend', this._canvasShow, this)
        },

        addTo: function(map) {
            map.addLayer(this)
            return this
        },

        clearLayers: function() {
            this._latlngMarkers = null
            this._markers = null
            this._redraw(true)
        },
        _canvasHide: function() {
            this._canvas.style.visibility = 'hidden'
        },
        _canvasShow: function() {
            this._canvas.style.visibility = 'visible'
        },
        _addMarker: function(marker, latlng, isDisplaying) {
            var self = this
            // Needed for pop-up & tooltip to work.
            marker._map = self._map

            // _markers contains Points of markers currently displaying on map
            if (!self._markers) self._markers = new Rbush()

            // _latlngMarkers contains Lat\Long coordinates of all markers in layer.
            if (!self._latlngMarkers) {
                self._latlngMarkers = new Rbush()
                self._latlngMarkers.dirty = 0
                self._latlngMarkers.total = 0
            }

            L.Util.stamp(marker)

            var pointPos = self._map.latLngToContainerPoint(latlng)
            var iconSize = marker.options.icon.options.iconSize

            var adjX = iconSize[0] / 2
            var adjY = iconSize[1] / 2
            var ret = [({
                minX: (pointPos.x - adjX),
                minY: (pointPos.y - adjY),
                maxX: (pointPos.x + adjX),
                maxY: (pointPos.y + adjY),
                data: marker
            }), ({
                minX: latlng.lng,
                minY: latlng.lat,
                maxX: latlng.lng,
                maxY: latlng.lat,
                data: marker
            })]

            self._latlngMarkers.dirty++
            self._latlngMarkers.total++

            // Only draw if we are on map
            if (isDisplaying === true) self._drawMarker(marker, pointPos)

            return ret
        },

        _drawMarker: function(marker, pointPos) {
            var self = this

            if (!this._imageLookup) this._imageLookup = {}
            if (!pointPos) {
                pointPos = self._map.latLngToContainerPoint(marker.getLatLng())
            }

            var iconUrl = marker.options.icon.options.iconUrl

            if (marker.canvas_img) {
                self._drawImage(marker, pointPos)
            } else {
                if (self._imageLookup[iconUrl]) {
                    marker.canvas_img = self._imageLookup[iconUrl][0]

                    if (self._imageLookup[iconUrl][1] === false) {
                        self._imageLookup[iconUrl][2].push([marker, pointPos])
                    } else {
                        self._drawImage(marker, pointPos)
                    }
                } else {
                    var i = new Image()
                    i.src = iconUrl
                    marker.canvas_img = i

                    // Image,isLoaded,marker\pointPos ref
                    self._imageLookup[iconUrl] = [i, false, [[marker, pointPos]]]

                    i.onload = function() {
                        self._imageLookup[iconUrl][1] = true
                        self._imageLookup[iconUrl][2].forEach(function(e) {
                            self._drawImage(e[0], e[1])
                        })
                    }
                }
            }
        },

        _drawImage: function(marker, pointPos) {
            var options = marker.options.icon.options

            this._context.drawImage(
                marker.canvas_img,
                pointPos.x - options.iconAnchor[0],
                pointPos.y - options.iconAnchor[1],
                options.iconSize[0],
                options.iconSize[1]
            )
        },

        _reset: function() {
            var topLeft = this._map.containerPointToLayerPoint([0, 0])
            L.DomUtil.setPosition(this._canvas, topLeft)

            var size = this._map.getSize()

            this._canvas.width = size.x
            this._canvas.height = size.y

            this._redraw()
        },

        _redraw: function(clear) {
            var self = this

            if (clear) this._context.clearRect(0, 0, this._canvas.width, this._canvas.height)
            if (!this._map || !this._latlngMarkers) return

            var tmp = []

            // If we are 10% individual inserts\removals, reconstruct lookup for efficiency
            if (self._latlngMarkers.dirty / self._latlngMarkers.total >= 0.1) {
                self._latlngMarkers.all().forEach(function(e) {
                    tmp.push(e)
                })

                self._latlngMarkers.clear()
                self._latlngMarkers.load(tmp)
                self._latlngMarkers.dirty = 0
                tmp = []
            }

            var mapBounds = self._map.getBounds()

            // Only re-draw what we are showing on the map.

            var mapBoxCoords = {

                minX: mapBounds.getWest(),
                minY: mapBounds.getSouth(),
                maxX: mapBounds.getEast(),
                maxY: mapBounds.getNorth()
            }

            self._latlngMarkers.search(mapBoxCoords).forEach(function(e) {
                // Readjust Point Map
                var pointPos = self._map.latLngToContainerPoint(e.data.getLatLng())

                var iconSize = e.data.options.icon.options.iconSize
                var adjX = iconSize[0] / 2
                var adjY = iconSize[1] / 2

                var newCoords = {
                    minX: (pointPos.x - adjX),
                    minY: (pointPos.y - adjY),
                    maxX: (pointPos.x + adjX),
                    maxY: (pointPos.y + adjY),
                    data: e.data
                }

                tmp.push(newCoords)

                // Redraw points
                self._drawMarker(e.data, pointPos)
            })

            // Clear rBush & Bulk Load for performance
            this._markers.clear()
            this._markers.load(tmp)
        },

        _initCanvas: function() {
            this._canvas = L.DomUtil.create('canvas', 'leaflet-canvas-icon-layer leaflet-layer')
            var originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin'])
            this._canvas.style[originProp] = '50% 50%'

            var size = this._map.getSize()
            this._canvas.width = size.x
            this._canvas.height = size.y

            this._context = this._canvas.getContext('2d')

            var animated = this._map.options.zoomAnimation && L.Browser.any3d
            L.DomUtil.addClass(this._canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'))
        },

        addOnClickListener: function(listener) {
            this._onClickListeners.push(listener)
        },

        addOnHoverListener: function(listener) {
            this._onHoverListeners.push(listener)
        },

        _executeListeners: function(event) {
            if (!this._markers) return

            var me = this
            var x = event.containerPoint.x
            var y = event.containerPoint.y

            if (me._openToolTip) {
                me._openToolTip.closeTooltip()
                delete me._openToolTip
            }

            var ret = this._markers.search({ minX: x, minY: y, maxX: x, maxY: y })

            if (ret && ret.length > 0) {
                me._map._container.style.cursor = 'pointer'

                if (event.type === 'click') {
                    var hasPopup = ret[0].data.getPopup()
                    if (hasPopup) ret[0].data.openPopup()

                    me._onClickListeners.forEach(function(listener) { listener(event, ret) })
                }

                if (event.type === 'mousemove') {
                    var hasTooltip = ret[0].data.getTooltip()
                    if (hasTooltip) {
                        me._openToolTip = ret[0].data
                        ret[0].data.openTooltip()
                    }

                    me._onHoverListeners.forEach(function(listener) { listener(event, ret) })
                }
            } else {
                me._map._container.style.cursor = ''
            }
        }
    })

    L.canvasIconLayer = function(options) {
        return new CanvasIconLayer(options)
    }
}

export default {
    init
}