import React, { Component } from 'react'

import { debounce, parentPosition, parentHasClass } from '../utils'
import {
  Bounds,
  MapProps,
  MapReactState,
  MinMaxBounds,
  MoveEvent,
  Point,
  Tile,
  TileComponent,
  TileValues,
  WAdd,
  WarningType,
  WRem,
} from '../types'
import { osm } from '../providers'

const ANIMATION_TIME = 300
const DIAGONAL_THROW_TIME = 1500
const SCROLL_PIXELS_FOR_ZOOM_LEVEL = 150
const MIN_DRAG_FOR_THROW = 40
const CLICK_TOLERANCE = 2
const DOUBLE_CLICK_DELAY = 300
const DEBOUNCE_DELAY = 60
const PINCH_RELEASE_THROW_DELAY = 300
const WARNING_DISPLAY_TIMEOUT = 300

const NOOP = () => true

// https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
const lng2tile = (lon: number, zoom: number): number => ((lon + 180) / 360) * Math.pow(2, zoom)
const lat2tile = (lat: number, zoom: number): number =>
  ((1 - Math.log(Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)) / Math.PI) / 2) *
  Math.pow(2, zoom)

function tile2lng(x: number, z: number): number {
  return (x / Math.pow(2, z)) * 360 - 180
}

function tile2lat(y: number, z: number): number {
  const n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z)
  return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)))
}

function getMousePixel(dom: HTMLElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): Point {
  const parent = parentPosition(dom)
  return [event.clientX - parent.x, event.clientY - parent.y]
}

function easeOutQuad(t: number): number {
  return t * (2 - t)
}

// minLat, maxLat, minLng, maxLng
const absoluteMinMax = [
  tile2lat(Math.pow(2, 10), 10),
  tile2lat(0, 10),
  tile2lng(0, 10),
  tile2lng(Math.pow(2, 10), 10),
] as MinMaxBounds

const hasWindow = typeof window !== 'undefined'

const performanceNow =
  hasWindow && window.performance && window.performance.now
    ? () => window.performance.now()
    : (() => {
        const timeStart = new Date().getTime()
        return () => new Date().getTime() - timeStart
      })()

const requestAnimationFrame = (callback: (timestamp: number) => void): number | null => {
  if (hasWindow) {
    return (window.requestAnimationFrame || window.setTimeout)(callback)
  } else {
    callback(new Date().getTime())
    return null
  }
}
const cancelAnimationFrame = (animFrame: number | null) =>
  hasWindow && animFrame ? (window.cancelAnimationFrame || window.clearTimeout)(animFrame) : false

function srcSet(
  dprs: number[],
  url: (x: number, y: number, z: number, dpr?: number) => string,
  x: number,
  y: number,
  z: number
): string {
  if (!dprs || dprs.length === 0) {
    return ''
  }
  return dprs.map((dpr) => url(x, y, z, dpr) + (dpr === 1 ? '' : ` ${dpr}x`)).join(', ')
}

const ImgTile: TileComponent = ({ tile, tileLoaded }) => (
  <img
    src={tile.url}
    srcSet={tile.srcSet}
    width={tile.width}
    height={tile.height}
    loading={'lazy'}
    onLoad={tileLoaded}
    alt={''}
    style={{
      position: 'absolute',
      left: tile.left,
      top: tile.top,
      willChange: 'transform',
      transformOrigin: 'top left',
      opacity: 1,
    }}
  />
)

export class Map extends Component<MapProps, MapReactState> {
  static defaultProps = {
    animate: true,
    metaWheelZoom: false,
    metaWheelZoomWarning: 'Use META + wheel to zoom!',
    twoFingerDrag: false,
    twoFingerDragWarning: 'Use two fingers to move the map',
    zoomSnap: true,
    mouseEvents: true,
    touchEvents: true,
    warningZIndex: 100,
    animateMaxScreens: 5,
    minZoom: 1,
    maxZoom: 18,
    limitBounds: 'center',
    dprs: [],
    tileComponent: ImgTile,
  }

  _containerRef?: HTMLDivElement
  _mousePosition?: Point
  _loadTracker?: { [key: string]: boolean }
  _dragStart: Point | null = null
  _mouseDown = false
  _moveEvents: MoveEvent[] = []
  _lastClick: number | null = null
  _lastTap: number | null = null
  _lastWheel: number | null = null
  _touchStartPixel: Point[] | null = null
  _touchStartMidPoint: Point | null = null
  _touchStartDistance: number | null = null
  _secondTouchEnd: number | null = null
  _warningClearTimeout: number | null = null

  _isAnimating = false
  _animationStart: number | null = null
  _animationEnd: number | null = null
  _zoomStart: number | null = null
  _centerTarget: Point | null = null
  _zoomTarget: number | null = null
  _zoomAround: Point | null = null
  _animFrame: number | null = null

  _boundsSynced = false
  _minMaxCache: [number, number, number, MinMaxBounds] | null = null

  _lastZoom: number
  _lastCenter: Point
  _centerStart?: Point

  _resizeObserver = null

  constructor(props: MapProps) {
    super(props)

    this.syncToProps = debounce(this.syncToProps, DEBOUNCE_DELAY)

    // When users are using uncontrolled components we have to keep this
    // so we can know if we should call onBoundsChanged
    this._lastZoom = props.defaultZoom ?? props.zoom ?? 14
    this._lastCenter = props.defaultCenter ?? props.center ?? [0, 0]

    this.state = {
      zoom: this._lastZoom,
      center: this._lastCenter,
      width: props.width ?? props.defaultWidth ?? -1,
      height: props.height ?? props.defaultHeight ?? -1,
      zoomDelta: 0,
      pixelDelta: undefined,
      oldTiles: [],
      showWarning: false,
      warningType: undefined,
    }
  }

  componentDidMount(): void {
    this.props.mouseEvents && this.bindMouseEvents()
    this.props.touchEvents && this.bindTouchEvents()

    if (!this.props.width || !this.props.height) {
      // A height:100% container div often results in height=0 being returned on mount.
      // So ask again once everything is painted.
      if (!this.updateWidthHeight()) {
        requestAnimationFrame(this.updateWidthHeight)
      }
      this.bindResizeEvent()
    }

    this.bindWheelEvent()
    this.syncToProps()

    if (typeof (window as any).ResizeObserver !== 'undefined') {
      this._resizeObserver = new (window as any).ResizeObserver(() => {
        this.updateWidthHeight()
      })

      this._resizeObserver.observe(this._containerRef)
    }
  }

  componentWillUnmount(): void {
    this.props.mouseEvents && this.unbindMouseEvents()
    this.props.touchEvents && this.unbindTouchEvents()

    this.unbindWheelEvent()

    if (!this.props.width || !this.props.height) {
      this.unbindResizeEvent()
    }

    if (this._resizeObserver) {
      this._resizeObserver.disconnect()
    }
  }

  updateWidthHeight = (): boolean => {
    if (this._containerRef) {
      const rect = this._containerRef.getBoundingClientRect()

      if (rect && rect.width > 0 && rect.height > 0) {
        this.setState({
          width: rect.width,
          height: rect.height,
        })
        return true
      }
    }
    return false
  }

  wa: WAdd = (...args: Parameters<WAdd>) => window.addEventListener(...args)
  wr: WRem = (...args: Parameters<WRem>) => window.removeEventListener(...args)

  bindMouseEvents = (): void => {
    this.wa('mousedown', this.handleMouseDown)
    this.wa('mouseup', this.handleMouseUp)
    this.wa('mousemove', this.handleMouseMove)
  }

  bindTouchEvents = (): void => {
    this.wa('touchstart', this.handleTouchStart, { passive: false })
    this.wa('touchmove', this.handleTouchMove, { passive: false })
    this.wa('touchend', this.handleTouchEnd, { passive: false })
  }

  unbindMouseEvents = (): void => {
    this.wr('mousedown', this.handleMouseDown)
    this.wr('mouseup', this.handleMouseUp)
    this.wr('mousemove', this.handleMouseMove)
  }

  unbindTouchEvents = (): void => {
    this.wr('touchstart', this.handleTouchStart)
    this.wr('touchmove', this.handleTouchMove)
    this.wr('touchend', this.handleTouchEnd)
  }

  bindResizeEvent = (): void => {
    this.wa('resize', this.updateWidthHeight)
  }

  unbindResizeEvent = (): void => {
    this.wr('resize', this.updateWidthHeight)
  }

  bindWheelEvent = (): void => {
    if (this._containerRef) {
      this._containerRef.addEventListener('wheel', this.handleWheel, { passive: false })
    }
  }

  unbindWheelEvent = (): void => {
    if (this._containerRef) {
      this._containerRef.removeEventListener('wheel', this.handleWheel)
    }
  }

  componentDidUpdate(prevProps: MapProps): void {
    if (this.props.mouseEvents !== prevProps.mouseEvents) {
      this.props.mouseEvents ? this.bindMouseEvents() : this.unbindMouseEvents()
    }

    if (this.props.touchEvents !== prevProps.touchEvents) {
      this.props.touchEvents ? this.bindTouchEvents() : this.unbindTouchEvents()
    }

    if (this.props.width && this.props.width !== prevProps.width) {
      this.setState({ width: this.props.width })
    }

    if (this.props.height && this.props.height !== prevProps.height) {
      this.setState({ height: this.props.height })
    }

    if (!this.props.center && !this.props.zoom) {
      // if the user isn't controlling neither zoom nor center we don't have to update.
      return
    }
    if (
      (!this.props.center ||
        (this.props.center[0] === prevProps?.center?.[0] && this.props.center[1] === prevProps.center[1])) &&
      this.props.zoom === prevProps.zoom
    ) {
      // if the user is controlling either zoom or center but nothing changed
      // we don't have to update aswell
      return
    }

    const currentCenter = this._isAnimating ? this._centerTarget : this.state.center
    const currentZoom = this._isAnimating ? this._zoomTarget : this.state.zoom

    if (currentCenter && currentZoom) {
      const nextCenter = this.props.center ?? currentCenter // prevent the rare null errors
      const nextZoom = this.props.zoom ?? currentZoom

      if (
        Math.abs(nextZoom - currentZoom) > 0.001 ||
        Math.abs(nextCenter[0] - currentCenter[0]) > 0.0001 ||
        Math.abs(nextCenter[1] - currentCenter[1]) > 0.0001
      ) {
        this.setCenterZoomTarget(nextCenter, nextZoom, true)
      }
    }
  }

  setCenterZoomTarget = (
    center: Point | null,
    zoom: number,
    fromProps = false,
    zoomAround: Point | null = null,
    animationDuration = ANIMATION_TIME
  ): void => {
    if (
      this.props.animate &&
      (!fromProps ||
        this.distanceInScreens(center, zoom, this.state.center, this.state.zoom) <= this.props.animateMaxScreens)
    ) {
      if (this._isAnimating) {
        cancelAnimationFrame(this._animFrame)
        const { centerStep, zoomStep } = this.animationStep(performanceNow())
        this._centerStart = centerStep
        this._zoomStart = zoomStep
      } else {
        this._isAnimating = true
        this._centerStart = this.limitCenterAtZoom([this._lastCenter[0], this._lastCenter[1]], this._lastZoom)
        this._zoomStart = this._lastZoom
        this.onAnimationStart()
      }

      this._animationStart = performanceNow()
      this._animationEnd = this._animationStart + animationDuration

      if (zoomAround) {
        this._zoomAround = zoomAround
        this._centerTarget = this.calculateZoomCenter(this._lastCenter, zoomAround, this._lastZoom, zoom)
      } else {
        this._zoomAround = null
        this._centerTarget = center
      }
      this._zoomTarget = zoom

      this._animFrame = requestAnimationFrame(this.animate)
    } else {
      this.stopAnimating()

      if (zoomAround) {
        const center = this.calculateZoomCenter(this._lastCenter, zoomAround, this._lastZoom, zoom)
        this.setCenterZoom(center, zoom, fromProps)
      } else {
        this.setCenterZoom(center || this.state.center, zoom, fromProps)
      }
    }
  }

  setCenterZoomForChildren = (center: Point | null, zoom: number): void => {
    this.setCenterZoomTarget(center || this.state.center, zoom || this.state.zoom, true)
  }

  distanceInScreens = (centerTarget: Point, zoomTarget: number, center: Point, zoom: number): number => {
    const { width, height } = this.state

    // distance in pixels at the current zoom level
    const l1 = this.latLngToPixel(center, center, zoom)
    const l2 = this.latLngToPixel(centerTarget, center, zoom)

    // distance in pixels at the target zoom level (could be the same)
    const z1 = this.latLngToPixel(center, center, zoomTarget)
    const z2 = this.latLngToPixel(centerTarget, center, zoomTarget)

    // take the average between the two and divide by width or height to get the distance multiplier in screens
    const w = (Math.abs(l1[0] - l2[0]) + Math.abs(z1[0] - z2[0])) / 2 / width
    const h = (Math.abs(l1[1] - l2[1]) + Math.abs(z1[1] - z2[1])) / 2 / height

    // return the distance
    return Math.sqrt(w * w + h * h)
  }

  animationStep = (timestamp: number): { centerStep: Point; zoomStep: number } => {
    if (
      !this._animationEnd ||
      !this._animationStart ||
      !this._zoomTarget ||
      !this._zoomStart ||
      !this._centerStart ||
      !this._centerTarget
    ) {
      return {
        centerStep: this.state.center,
        zoomStep: this.state.zoom,
      }
    }
    const length = this._animationEnd - this._animationStart
    const progress = Math.max(timestamp - this._animationStart, 0)
    const percentage = easeOutQuad(progress / length)

    const zoomDiff = (this._zoomTarget - this._zoomStart) * percentage
    const zoomStep = this._zoomStart + zoomDiff

    if (this._zoomAround) {
      const centerStep = this.calculateZoomCenter(this._centerStart, this._zoomAround, this._zoomStart, zoomStep)

      return { centerStep, zoomStep }
    } else {
      const centerStep = [
        this._centerStart[0] + (this._centerTarget[0] - this._centerStart[0]) * percentage,
        this._centerStart[1] + (this._centerTarget[1] - this._centerStart[1]) * percentage,
      ] as Point

      return { centerStep, zoomStep }
    }
  }

  animate = (timestamp: number): void => {
    if (!this._animationEnd || timestamp >= this._animationEnd) {
      this._isAnimating = false
      this.setCenterZoom(this._centerTarget, this._zoomTarget, true)
      this.onAnimationStop()
    } else {
      const { centerStep, zoomStep } = this.animationStep(timestamp)
      this.setCenterZoom(centerStep, zoomStep)
      this._animFrame = requestAnimationFrame(this.animate)
    }
  }

  stopAnimating = (): void => {
    if (this._isAnimating) {
      this._isAnimating = false
      this.onAnimationStop()
      cancelAnimationFrame(this._animFrame)
    }
  }

  limitCenterAtZoom = (center?: Point | null, zoom?: number | null): Point => {
    // [minLat, maxLat, minLng, maxLng]
    const minMax = this.getBoundsMinMax(zoom || this.state.zoom)

    return [
      Math.max(Math.min(!center || isNaN(center[0]) ? this.state.center[0] : center[0], minMax[1]), minMax[0]),
      Math.max(Math.min(!center || isNaN(center[1]) ? this.state.center[1] : center[1], minMax[3]), minMax[2]),
    ] as Point
  }

  onAnimationStart = (): void => {
    this.props.onAnimationStart && this.props.onAnimationStart()
  }

  onAnimationStop = (): void => {
    this.props.onAnimationStop && this.props.onAnimationStop()
  }

  // main logic when changing coordinates
  setCenterZoom = (center?: Point | null, zoom?: number | null, animationEnded = false): void => {
    const limitedCenter = this.limitCenterAtZoom(center, zoom)

    if (zoom && Math.round(this.state.zoom) !== Math.round(zoom)) {
      const tileValues = this.tileValues(this.state)
      const nextValues = this.tileValues({
        center: limitedCenter,
        zoom,
        width: this.state.width,
        height: this.state.height,
      })
      const oldTiles = this.state.oldTiles

      this.setState(
        {
          oldTiles: oldTiles.filter((o) => o.roundedZoom !== tileValues.roundedZoom).concat(tileValues),
        },
        NOOP
      )

      const loadTracker: { [key: string]: boolean } = {}

      for (let x = nextValues.tileMinX; x <= nextValues.tileMaxX; x++) {
        for (let y = nextValues.tileMinY; y <= nextValues.tileMaxY; y++) {
          const key = `${x}-${y}-${nextValues.roundedZoom}`
          loadTracker[key] = false
        }
      }

      this._loadTracker = loadTracker
    }

    this.setState({ center: limitedCenter, zoom: zoom || this.state.zoom }, NOOP)

    const maybeZoom = this.props.zoom ? this.props.zoom : this._lastZoom
    const maybeCenter = this.props.center ? this.props.center : this._lastCenter
    if (
      zoom &&
      (animationEnded ||
        Math.abs(maybeZoom - zoom) > 0.001 ||
        Math.abs(maybeCenter[0] - limitedCenter[0]) > 0.00001 ||
        Math.abs(maybeCenter[1] - limitedCenter[1]) > 0.00001)
    ) {
      this._lastZoom = zoom
      this._lastCenter = [...limitedCenter]
      this.syncToProps(limitedCenter, zoom)
    }
  }

  getBoundsMinMax = (zoom: number): MinMaxBounds => {
    if (this.props.limitBounds === 'center') {
      return absoluteMinMax
    }

    const { width, height } = this.state

    if (
      this._minMaxCache &&
      this._minMaxCache[0] === zoom &&
      this._minMaxCache[1] === width &&
      this._minMaxCache[2] === height
    ) {
      return this._minMaxCache[3]
    }

    const pixelsAtZoom = Math.pow(2, zoom) * 256

    const minLng = width > pixelsAtZoom ? 0 : tile2lng(width / 512, zoom) // x
    const minLat = height > pixelsAtZoom ? 0 : tile2lat(Math.pow(2, zoom) - height / 512, zoom) // y

    const maxLng = width > pixelsAtZoom ? 0 : tile2lng(Math.pow(2, zoom) - width / 512, zoom) // x
    const maxLat = height > pixelsAtZoom ? 0 : tile2lat(height / 512, zoom) // y

    const minMax = [minLat, maxLat, minLng, maxLng] as MinMaxBounds

    this._minMaxCache = [zoom, width, height, minMax]

    return minMax
  }

  tileLoaded = (key: string): void => {
    if (this._loadTracker && key in this._loadTracker) {
      this._loadTracker[key] = true

      const unloadedCount = Object.values(this._loadTracker).filter((v) => !v).length

      if (unloadedCount === 0) {
        this.setState({ oldTiles: [] }, NOOP)
      }
    }
  }

  coordsInside(pixel: Point): boolean {
    const { width, height } = this.state

    if (pixel[0] < 0 || pixel[1] < 0 || pixel[0] >= width || pixel[1] >= height) {
      return false
    }

    const parent = this._containerRef
    if (parent) {
      const pos = parentPosition(parent)
      const element = document.elementFromPoint(pixel[0] + pos.x, pixel[1] + pos.y)

      return parent === element || parent.contains(element)
    } else {
      return false
    }
  }

  handleTouchStart = (event: TouchEvent): void => {
    if (!this._containerRef) {
      return
    }
    if (event.target && parentHasClass(event.target as HTMLElement, 'pigeon-drag-block')) {
      return
    }
    if (event.touches.length === 1) {
      const touch = event.touches[0]
      const pixel = getMousePixel(this._containerRef, touch)

      if (this.coordsInside(pixel)) {
        this._touchStartPixel = [pixel]

        if (!this.props.twoFingerDrag) {
          this.stopAnimating()

          if (this._lastTap && performanceNow() - this._lastTap < DOUBLE_CLICK_DELAY) {
            event.preventDefault()
            const latLngNow = this.pixelToLatLng(this._touchStartPixel[0])
            this.setCenterZoomTarget(
              null,
              Math.max(this.props.minZoom, Math.min(this.state.zoom + 1, this.props.maxZoom)),
              false,
              latLngNow
            )
          } else {
            this._lastTap = performanceNow()
            this.trackMoveEvents(pixel)
          }
        }
      }
      // added second finger and first one was in the area
    } else if (event.touches.length === 2 && this._touchStartPixel) {
      event.preventDefault()

      this.stopTrackingMoveEvents()

      if (this.state.pixelDelta || this.state.zoomDelta) {
        this.sendDeltaChange()
      }

      const t1 = getMousePixel(this._containerRef, event.touches[0])
      const t2 = getMousePixel(this._containerRef, event.touches[1])

      this._touchStartPixel = [t1, t2]
      this._touchStartMidPoint = [(t1[0] + t2[0]) / 2, (t1[1] + t2[1]) / 2]
      this._touchStartDistance = Math.sqrt(Math.pow(t1[0] - t2[0], 2) + Math.pow(t1[1] - t2[1], 2))
    }
  }

  handleTouchMove = (event: TouchEvent): void => {
    if (!this._containerRef) {
      this._touchStartPixel = null
      return
    }
    if (event.touches.length === 1 && this._touchStartPixel) {
      const touch = event.touches[0]
      const pixel = getMousePixel(this._containerRef, touch)

      if (this.props.twoFingerDrag) {
        if (this.coordsInside(pixel)) {
          this.showWarning('fingers')
        }
      } else {
        event.preventDefault()
        this.trackMoveEvents(pixel)

        this.setState(
          {
            pixelDelta: [pixel[0] - this._touchStartPixel[0][0], pixel[1] - this._touchStartPixel[0][1]],
          },
          NOOP
        )
      }
    } else if (
      event.touches.length === 2 &&
      this._touchStartPixel &&
      this._touchStartMidPoint &&
      this._touchStartDistance
    ) {
      const { width, height, zoom } = this.state

      event.preventDefault()

      const t1 = getMousePixel(this._containerRef, event.touches[0])
      const t2 = getMousePixel(this._containerRef, event.touches[1])

      const midPoint = [(t1[0] + t2[0]) / 2, (t1[1] + t2[1]) / 2]
      const midPointDiff = [midPoint[0] - this._touchStartMidPoint[0], midPoint[1] - this._touchStartMidPoint[1]]

      const distance = Math.sqrt(Math.pow(t1[0] - t2[0], 2) + Math.pow(t1[1] - t2[1], 2))

      const zoomDelta =
        Math.max(
          this.props.minZoom,
          Math.min(this.props.maxZoom, zoom + Math.log2(distance / this._touchStartDistance))
        ) - zoom
      const scale = Math.pow(2, zoomDelta)

      const centerDiffDiff = [(width / 2 - midPoint[0]) * (scale - 1), (height / 2 - midPoint[1]) * (scale - 1)]

      this.setState(
        {
          zoomDelta: zoomDelta,
          pixelDelta: [centerDiffDiff[0] + midPointDiff[0] * scale, centerDiffDiff[1] + midPointDiff[1] * scale],
        },
        NOOP
      )
    }
  }

  handleTouchEnd = (event: TouchEvent): void => {
    if (!this._containerRef) {
      this._touchStartPixel = null
      return
    }
    if (this._touchStartPixel) {
      const { zoomSnap, twoFingerDrag, minZoom, maxZoom } = this.props
      const { zoomDelta } = this.state
      const { center, zoom } = this.sendDeltaChange()

      if (event.touches.length === 0) {
        if (twoFingerDrag) {
          this.clearWarning()
        } else {
          // if the click started and ended at about
          // the same place we can view it as a click
          // and not prevent default behavior.
          const oldTouchPixel = this._touchStartPixel[0]
          const newTouchPixel = getMousePixel(this._containerRef, event.changedTouches[0])

          if (
            Math.abs(oldTouchPixel[0] - newTouchPixel[0]) > CLICK_TOLERANCE ||
            Math.abs(oldTouchPixel[1] - newTouchPixel[1]) > CLICK_TOLERANCE
          ) {
            // don't throw immediately after releasing the second finger
            if (!this._secondTouchEnd || performanceNow() - this._secondTouchEnd > PINCH_RELEASE_THROW_DELAY) {
              event.preventDefault()
              this.throwAfterMoving(newTouchPixel, center, zoom)
            }
          }

          this._touchStartPixel = null
          this._secondTouchEnd = null
        }
      } else if (event.touches.length === 1) {
        event.preventDefault()
        const touch = getMousePixel(this._containerRef, event.touches[0])

        this._secondTouchEnd = performanceNow()
        this._touchStartPixel = [touch]
        this.trackMoveEvents(touch)

        if (zoomSnap) {
          // if somehow we have no midpoint for the two finger touch, just take the center of the map
          const latLng = this._touchStartMidPoint ? this.pixelToLatLng(this._touchStartMidPoint) : this.state.center

          let zoomTarget

          // do not zoom up/down if we must drag with 2 fingers and didn't change the zoom level
          if (twoFingerDrag && Math.round(this.state.zoom) === Math.round(this.state.zoom + zoomDelta)) {
            zoomTarget = Math.round(this.state.zoom)
          } else {
            zoomTarget = zoomDelta > 0 ? Math.ceil(this.state.zoom) : Math.floor(this.state.zoom)
          }
          const zoom = Math.max(minZoom, Math.min(zoomTarget, maxZoom))

          this.setCenterZoomTarget(latLng, zoom, false, latLng)
        }
      }
    }
  }

  handleMouseDown = (event: MouseEvent): void => {
    if (!this._containerRef) {
      return
    }
    const pixel = getMousePixel(this._containerRef, event)

    if (
      event.button === 0 &&
      (!event.target || !parentHasClass(event.target as HTMLElement, 'pigeon-drag-block')) &&
      this.coordsInside(pixel)
    ) {
      this.stopAnimating()
      event.preventDefault()

      if (this._lastClick && performanceNow() - this._lastClick < DOUBLE_CLICK_DELAY) {
        if (!parentHasClass(event.target as HTMLElement, 'pigeon-click-block')) {
          const latLngNow = this.pixelToLatLng(this._mousePosition || pixel)
          this.setCenterZoomTarget(
            null,
            Math.max(this.props.minZoom, Math.min(this.state.zoom + 1, this.props.maxZoom)),
            false,
            latLngNow
          )
        }
      } else {
        this._lastClick = performanceNow()

        this._mouseDown = true
        this._dragStart = pixel
        this.trackMoveEvents(pixel)
      }
    }
  }

  handleMouseMove = (event: MouseEvent): void => {
    if (!this._containerRef) {
      return
    }
    this._mousePosition = getMousePixel(this._containerRef, event)

    if (this._mouseDown && this._dragStart) {
      this.trackMoveEvents(this._mousePosition)
      this.setState(
        {
          pixelDelta: [this._mousePosition[0] - this._dragStart[0], this._mousePosition[1] - this._dragStart[1]],
        },
        NOOP
      )
    }
  }

  handleMouseUp = (event: MouseEvent): void => {
    if (!this._containerRef) {
      this._mouseDown = false
      return
    }
    const { pixelDelta } = this.state

    if (this._mouseDown) {
      this._mouseDown = false

      const pixel = getMousePixel(this._containerRef, event)

      if (
        this.props.onClick &&
        (!event.target || !parentHasClass(event.target as HTMLElement, 'pigeon-click-block')) &&
        (!pixelDelta || Math.abs(pixelDelta[0]) + Math.abs(pixelDelta[1]) <= CLICK_TOLERANCE)
      ) {
        const latLng = this.pixelToLatLng(pixel)
        this.props.onClick({ event, latLng, pixel })
        this.setState({ pixelDelta: undefined }, NOOP)
      } else {
        const { center, zoom } = this.sendDeltaChange()

        this.throwAfterMoving(pixel, center, zoom)
      }
    }
  }

  // https://www.bennadel.com/blog/1856-using-jquery-s-animate-step-callback-function-to-create-custom-animations.htm
  stopTrackingMoveEvents = (): void => {
    this._moveEvents = []
  }

  trackMoveEvents = (coords: Point): void => {
    const timestamp = performanceNow()

    if (this._moveEvents.length === 0 || timestamp - this._moveEvents[this._moveEvents.length - 1].timestamp > 40) {
      this._moveEvents.push({ timestamp, coords })
      if (this._moveEvents.length > 2) {
        this._moveEvents.shift()
      }
    }
  }

  throwAfterMoving = (coords: Point, center: Point, zoom: number): void => {
    const { width, height } = this.state
    const { animate } = this.props

    const timestamp = performanceNow()
    const lastEvent = this._moveEvents.shift()

    if (lastEvent && animate) {
      const deltaMs = Math.max(timestamp - lastEvent.timestamp, 1)

      const delta = [
        ((coords[0] - lastEvent.coords[0]) / deltaMs) * 120,
        ((coords[1] - lastEvent.coords[1]) / deltaMs) * 120,
      ]

      const distance = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1])

      if (distance > MIN_DRAG_FOR_THROW) {
        const diagonal = Math.sqrt(width * width + height * height)

        const throwTime = (DIAGONAL_THROW_TIME * distance) / diagonal

        const lng = tile2lng(lng2tile(center[1], zoom) - delta[0] / 256.0, zoom)
        const lat = tile2lat(lat2tile(center[0], zoom) - delta[1] / 256.0, zoom)

        this.setCenterZoomTarget([lat, lng], zoom, false, null, throwTime)
      }
    }

    this.stopTrackingMoveEvents()
  }

  sendDeltaChange = () => {
    const { center, zoom, pixelDelta, zoomDelta } = this.state

    let lat = center[0]
    let lng = center[1]

    if (pixelDelta || zoomDelta !== 0) {
      lng = tile2lng(lng2tile(center[1], zoom + zoomDelta) - (pixelDelta ? pixelDelta[0] / 256.0 : 0), zoom + zoomDelta)
      lat = tile2lat(lat2tile(center[0], zoom + zoomDelta) - (pixelDelta ? pixelDelta[1] / 256.0 : 0), zoom + zoomDelta)
      this.setCenterZoom([lat, lng], zoom + zoomDelta)
    }

    this.setState(
      {
        pixelDelta: undefined,
        zoomDelta: 0,
      },
      NOOP
    )

    return {
      center: this.limitCenterAtZoom([lat, lng], zoom + zoomDelta),
      zoom: zoom + zoomDelta,
    }
  }

  getBounds = (center = this.state.center, zoom = this.zoomPlusDelta()): Bounds => {
    const { width, height } = this.state

    return {
      ne: this.pixelToLatLng([width - 1, 0], center, zoom),
      sw: this.pixelToLatLng([0, height - 1], center, zoom),
    }
  }

  syncToProps = (center = this.state.center, zoom = this.state.zoom): void => {
    const { onBoundsChanged } = this.props

    if (onBoundsChanged) {
      const bounds = this.getBounds(center, zoom)

      onBoundsChanged({ center, zoom, bounds, initial: !this._boundsSynced })

      this._boundsSynced = true
    }
  }

  handleWheel = (event: WheelEvent): void => {
    const { mouseEvents, metaWheelZoom, zoomSnap, animate } = this.props

    if (!mouseEvents) {
      return
    }

    if (!metaWheelZoom || event.metaKey || event.ctrlKey) {
      event.preventDefault()

      const addToZoom = -event.deltaY / SCROLL_PIXELS_FOR_ZOOM_LEVEL

      if (!zoomSnap && this._zoomTarget) {
        const stillToAdd = this._zoomTarget - this.state.zoom
        this.zoomAroundMouse(addToZoom + stillToAdd, event)
      } else {
        if (animate) {
          this.zoomAroundMouse(addToZoom, event)
        } else {
          if (!this._lastWheel || performanceNow() - this._lastWheel > ANIMATION_TIME) {
            this._lastWheel = performanceNow()
            this.zoomAroundMouse(addToZoom, event)
          }
        }
      }
    } else {
      this.showWarning('wheel')
    }
  }

  showWarning = (warningType: WarningType): void => {
    if (!this.state.showWarning || this.state.warningType !== warningType) {
      this.setState({ showWarning: true, warningType })
    }

    if (this._warningClearTimeout) {
      window.clearTimeout(this._warningClearTimeout)
    }
    this._warningClearTimeout = window.setTimeout(this.clearWarning, WARNING_DISPLAY_TIMEOUT)
  }

  clearWarning = (): void => {
    if (this.state.showWarning) {
      this.setState({ showWarning: false })
    }
  }

  zoomAroundMouse = (zoomDiff: number, event: MouseEvent): void => {
    if (!this._containerRef) {
      return
    }
    const { zoom } = this.state
    const { minZoom, maxZoom, zoomSnap } = this.props

    this._mousePosition = getMousePixel(this._containerRef, event)

    if (!this._mousePosition || (zoom === minZoom && zoomDiff < 0) || (zoom === maxZoom && zoomDiff > 0)) {
      return
    }

    const latLngNow = this.pixelToLatLng(this._mousePosition)

    let zoomTarget = zoom + zoomDiff
    if (zoomSnap) {
      zoomTarget = zoomDiff < 0 ? Math.floor(zoomTarget) : Math.ceil(zoomTarget)
    }
    zoomTarget = Math.max(minZoom, Math.min(zoomTarget, maxZoom))

    this.setCenterZoomTarget(null, zoomTarget, false, latLngNow)
  }

  // tools

  zoomPlusDelta = (): number => {
    return this.state.zoom + this.state.zoomDelta
  }

  pixelToLatLng = (pixel: Point, center = this.state.center, zoom = this.zoomPlusDelta()): Point => {
    const { width, height, pixelDelta } = this.state

    const pointDiff = [
      (pixel[0] - width / 2 - (pixelDelta ? pixelDelta[0] : 0)) / 256.0,
      (pixel[1] - height / 2 - (pixelDelta ? pixelDelta[1] : 0)) / 256.0,
    ]

    const tileX = lng2tile(center[1], zoom) + pointDiff[0]
    const tileY = lat2tile(center[0], zoom) + pointDiff[1]

    return [
      Math.max(absoluteMinMax[0], Math.min(absoluteMinMax[1], tile2lat(tileY, zoom))),
      Math.max(absoluteMinMax[2], Math.min(absoluteMinMax[3], tile2lng(tileX, zoom))),
    ] as Point
  }

  latLngToPixel = (latLng: Point, center = this.state.center, zoom = this.zoomPlusDelta()): Point => {
    const { width, height, pixelDelta } = this.state

    const tileCenterX = lng2tile(center[1], zoom)
    const tileCenterY = lat2tile(center[0], zoom)

    const tileX = lng2tile(latLng[1], zoom)
    const tileY = lat2tile(latLng[0], zoom)

    return [
      (tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0),
      (tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0),
    ] as Point
  }

  calculateZoomCenter = (center: Point, coords: Point, oldZoom: number, newZoom: number): Point => {
    const { width, height } = this.state

    const pixelBefore = this.latLngToPixel(coords, center, oldZoom)
    const pixelAfter = this.latLngToPixel(coords, center, newZoom)

    const newCenter = this.pixelToLatLng(
      [width / 2 + pixelAfter[0] - pixelBefore[0], height / 2 + pixelAfter[1] - pixelBefore[1]],
      center,
      newZoom
    )

    return this.limitCenterAtZoom(newCenter, newZoom)
  }

  // ref

  setRef = (dom: HTMLDivElement) => {
    this._containerRef = dom
  }

  // data to display the tiles

  tileValues({
    center,
    zoom,
    pixelDelta,
    zoomDelta,
    width,
    height,
  }: {
    center: Point
    zoom: number
    pixelDelta?: Point
    zoomDelta?: number
    width: number
    height: number
  }): TileValues {
    const roundedZoom = Math.round(zoom + (zoomDelta || 0))
    const zoomDiff = zoom + (zoomDelta || 0) - roundedZoom

    const scale = Math.pow(2, zoomDiff)
    const scaleWidth = width / scale
    const scaleHeight = height / scale

    const tileCenterX = lng2tile(center[1], roundedZoom) - (pixelDelta ? pixelDelta[0] / 256.0 / scale : 0)
    const tileCenterY = lat2tile(center[0], roundedZoom) - (pixelDelta ? pixelDelta[1] / 256.0 / scale : 0)

    const halfWidth = scaleWidth / 2 / 256.0
    const halfHeight = scaleHeight / 2 / 256.0

    const tileMinX = Math.floor(tileCenterX - halfWidth)
    const tileMaxX = Math.floor(tileCenterX + halfWidth)

    const tileMinY = Math.floor(tileCenterY - halfHeight)
    const tileMaxY = Math.floor(tileCenterY + halfHeight)

    return {
      tileMinX,
      tileMaxX,
      tileMinY,
      tileMaxY,
      tileCenterX,
      tileCenterY,
      roundedZoom,
      zoomDelta: zoomDelta || 0,
      scaleWidth,
      scaleHeight,
      scale,
    }
  }

  // display the tiles

  renderTiles(): JSX.Element {
    const { oldTiles, width, height } = this.state
    const { dprs } = this.props
    const mapUrl = this.props.provider || osm

    const {
      tileMinX,
      tileMaxX,
      tileMinY,
      tileMaxY,
      tileCenterX,
      tileCenterY,
      roundedZoom,
      scaleWidth,
      scaleHeight,
      scale,
    } = this.tileValues(this.state)

    const tiles: Tile[] = []

    for (let i = 0; i < oldTiles.length; i++) {
      const old = oldTiles[i]
      const zoomDiff = old.roundedZoom - roundedZoom

      if (Math.abs(zoomDiff) > 4 || zoomDiff === 0) {
        continue
      }

      const pow = 1 / Math.pow(2, zoomDiff)
      const xDiff = -(tileMinX - old.tileMinX * pow) * 256
      const yDiff = -(tileMinY - old.tileMinY * pow) * 256

      const xMin = Math.max(old.tileMinX, 0)
      const yMin = Math.max(old.tileMinY, 0)
      const xMax = Math.min(old.tileMaxX, Math.pow(2, old.roundedZoom) - 1)
      const yMax = Math.min(old.tileMaxY, Math.pow(2, old.roundedZoom) - 1)

      for (let x = xMin; x <= xMax; x++) {
        for (let y = yMin; y <= yMax; y++) {
          tiles.push({
            key: `${x}-${y}-${old.roundedZoom}`,
            url: mapUrl(x, y, old.roundedZoom),
            srcSet: srcSet(dprs, mapUrl, x, y, old.roundedZoom),
            left: xDiff + (x - old.tileMinX) * 256 * pow,
            top: yDiff + (y - old.tileMinY) * 256 * pow,
            width: 256 * pow,
            height: 256 * pow,
            active: false,
          })
        }
      }
    }

    const xMin = Math.max(tileMinX, 0)
    const yMin = Math.max(tileMinY, 0)
    const xMax = Math.min(tileMaxX, Math.pow(2, roundedZoom) - 1)
    const yMax = Math.min(tileMaxY, Math.pow(2, roundedZoom) - 1)

    for (let x = xMin; x <= xMax; x++) {
      for (let y = yMin; y <= yMax; y++) {
        tiles.push({
          key: `${x}-${y}-${roundedZoom}`,
          url: mapUrl(x, y, roundedZoom),
          srcSet: srcSet(dprs, mapUrl, x, y, roundedZoom),
          left: (x - tileMinX) * 256,
          top: (y - tileMinY) * 256,
          width: 256,
          height: 256,
          active: true,
        })
      }
    }

    const boxStyle: React.CSSProperties = {
      width: scaleWidth,
      height: scaleHeight,
      position: 'absolute',
      top: `calc((100% - ${height}px) / 2)`,
      left: `calc((100% - ${width}px) / 2)`,
      overflow: 'hidden',
      willChange: 'transform',
      transform: `scale(${scale}, ${scale})`,
      transformOrigin: 'top left',
    }
    const boxClassname = this.props.boxClassname || 'pigeon-tiles-box'

    const left = -((tileCenterX - tileMinX) * 256 - scaleWidth / 2)
    const top = -((tileCenterY - tileMinY) * 256 - scaleHeight / 2)

    const tilesStyle: React.CSSProperties = {
      position: 'absolute',
      width: (tileMaxX - tileMinX + 1) * 256,
      height: (tileMaxY - tileMinY + 1) * 256,
      willChange: 'transform',
      transform: `translate(${left}px, ${top}px)`,
    }

    const Tile = this.props.tileComponent

    return (
      <div style={boxStyle} className={boxClassname}>
        <div className="pigeon-tiles" style={tilesStyle}>
          {tiles.map((tile) => (
            <Tile key={tile.key} tile={tile} tileLoaded={() => this.tileLoaded(tile.key)} />
          ))}
        </div>
      </div>
    )
  }

  renderOverlays(): JSX.Element {
    const { width, height, center } = this.state

    const mapState = {
      bounds: this.getBounds(),
      zoom: this.zoomPlusDelta(),
      center: center,
      width,
      height,
    }

    const childrenWithProps = React.Children.map(this.props.children, (child) => {
      if (!child) {
        return null
      }

      if (!React.isValidElement(child)) {
        return child
      }

      const { anchor, position, offset } = child.props

      const c = this.latLngToPixel(anchor || position || center)

      return React.cloneElement(child, {
        left: c[0] - (offset ? offset[0] : 0),
        top: c[1] - (offset ? offset[1] : 0),
        latLngToPixel: this.latLngToPixel,
        pixelToLatLng: this.pixelToLatLng,
        setCenterZoom: this.setCenterZoomForChildren,
        mapProps: this.props,
        mapState,
      })
    })

    const childrenStyle: React.CSSProperties = {
      position: 'absolute',
      width: width,
      height: height,
      top: `calc((100% - ${height}px) / 2)`,
      left: `calc((100% - ${width}px) / 2)`,
    }

    return (
      <div className="pigeon-overlays" style={childrenStyle}>
        {childrenWithProps}
      </div>
    )
  }

  renderAttribution(): JSX.Element | null {
    const { attribution, attributionPrefix } = this.props

    if (attribution === false) {
      return null
    }

    const style: React.CSSProperties = {
      position: 'absolute',
      bottom: 0,
      right: 0,
      fontSize: '11px',
      padding: '2px 5px',
      background: 'rgba(255, 255, 255, 0.7)',
      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
      color: '#333',
    }

    const linkStyle: React.CSSProperties = {
      color: '#0078A8',
      textDecoration: 'none',
    }

    return (
      <div key="attr" className="pigeon-attribution" style={style}>
        {attributionPrefix === false ? null : (
          <span>
            {attributionPrefix || (
              <a href="https://pigeon-maps.js.org/" style={linkStyle} target="_blank" rel="noreferrer noopener">
                Pigeon
              </a>
            )}
            {' | '}
          </span>
        )}
        {attribution || (
          <span>
            {' © '}
            <a
              href="https://www.openstreetmap.org/copyright"
              style={linkStyle}
              target="_blank"
              rel="noreferrer noopener"
            >
              OpenStreetMap
            </a>
            {' contributors'}
          </span>
        )}
      </div>
    )
  }

  renderWarning(): JSX.Element | null {
    const { metaWheelZoom, metaWheelZoomWarning, twoFingerDrag, twoFingerDragWarning, warningZIndex } = this.props
    const { showWarning, warningType, width, height } = this.state

    if ((metaWheelZoom && metaWheelZoomWarning) || (twoFingerDrag && twoFingerDragWarning)) {
      const style: React.CSSProperties = {
        position: 'absolute',
        top: 0,
        left: 0,
        width: width,
        height: height,
        overflow: 'hidden',
        pointerEvents: 'none',
        opacity: showWarning ? 100 : 0,
        transition: 'opacity 300ms',
        background: 'rgba(0,0,0,0.5)',
        color: '#fff',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 22,
        fontFamily: '"Arial", sans-serif',
        textAlign: 'center',
        zIndex: warningZIndex,
      }

      const meta =
        typeof window !== 'undefined' && window.navigator && window.navigator.platform.toUpperCase().indexOf('MAC') >= 0
          ? '⌘'
          : 'ctrl'

      const warningText = warningType === 'fingers' ? twoFingerDragWarning : metaWheelZoomWarning

      return (
        <div className="pigeon-overlay-warning" style={style}>
          {warningText.replace('META', meta)}
        </div>
      )
    } else {
      return null
    }
  }

  render(): JSX.Element {
    const { touchEvents, twoFingerDrag } = this.props
    const { width, height } = this.state

    const containerStyle: React.CSSProperties = {
      width: this.props.width ? width : '100%',
      height: this.props.height ? height : '100%',
      position: 'relative',
      display: 'inline-block',
      overflow: 'hidden',
      background: '#dddddd',
      touchAction: touchEvents ? (twoFingerDrag ? 'pan-x pan-y' : 'none') : 'auto',
    }

    const hasSize = !!(width && height)

    return (
      <div style={containerStyle} ref={this.setRef} dir="ltr">
        {hasSize && this.renderTiles()}
        {hasSize && this.renderOverlays()}
        {hasSize && this.renderAttribution()}
        {hasSize && this.renderWarning()}
      </div>
    )
  }
}