/* eslint-disable */
'use strict';

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['leaflet'], factory)
  } else if (typeof exports === 'object') {
    module.exports = factory(require('leaflet'))
  } else {
    factory(window.L)
  }
}(this, function (L) {
  L.Canvas.include({
    _updateImg: function (layer) {
      const { img } = layer.options
      // const img = layer.options.img
      const p = layer._point.round()
      p.x += img.offset.x; p.y += img.offset.y
      if (img.rotate) {
        this._ctx.save()
        this._ctx.translate(p.x, p.y)
        this._ctx.rotate(img.rotate * Math.PI / 180)
        this._ctx.drawImage(img.el, -img.size[0] / 2, -img.size[1] / 2, img.size[0], img.size[1])
        this._ctx.restore()
      } else {
        this._ctx.drawImage(img.el, p.x - img.size[0] / 2, p.y - img.size[1] / 2, img.size[0], img.size[1])
      }
    }
  })

  const angleCrds = (map, prevLatlng, latlng) => {
    if (!latlng || !prevLatlng) return 0
    const pxStart = map.project(prevLatlng)
    const pxEnd = map.project(latlng)
    return Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) / Math.PI * 180 - 90
  }

  const defaultImgOptions = {
    rotate: 0,
    size: [40, 40],
    offset: { x: 0, y: 0 }
  }

  const CanvasMarker = L.CircleMarker.extend({
    _updatePath () {
      if (!this.options.img || !this.options.img.url) return
      if (!this.options.img.el) {
        this.options.img = { ...defaultImgOptions, ...this.options.img }
        this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng)
        const img = document.createElement('img')
        img.src = this.options.img.url
        this.options.img.el = img
        img.onload = () => {
          this.redraw()
        }
        img.onerror = () => {
          this.options.img = null
        }
      } else {
        this._renderer._updateImg(this)
      }
    }
  })

  L.canvasMarker = function (...options) {
    return new CanvasMarker(...options)
  }
}))