/* global google */
/* eslint-disable filenames/match-regex */
import type { Cluster } from './Cluster'

import type { ClusterIconStyle, ClusterIconInfo } from './types'

export class ClusterIcon {
  cluster: Cluster
  className: string
  clusterClassName: string
  styles: ClusterIconStyle[]
  center: google.maps.LatLng | undefined
  div: HTMLDivElement | null
  sums: ClusterIconInfo | null
  visible: boolean
  url: string
  height: number
  width: number
  anchorText: [number, number]
  anchorIcon: [number, number]
  textColor: string
  textSize: number
  textDecoration: string
  fontWeight: string
  fontStyle: string
  fontFamily: string
  backgroundPosition: string
  cMouseDownInCluster: boolean | null
  cDraggingMapByCluster: boolean | null
  timeOut: number | null

  boundsChangedListener: google.maps.MapsEventListener | null

  constructor(cluster: Cluster, styles: ClusterIconStyle[]) {
    cluster.getClusterer().extend(ClusterIcon, google.maps.OverlayView)

    this.cluster = cluster

    this.clusterClassName = this.cluster.getClusterer().getClusterClass()

    this.className = this.clusterClassName

    this.styles = styles

    this.center = undefined

    this.div = null

    this.sums = null

    this.visible = false

    this.boundsChangedListener = null

    this.url = ''

    this.height = 0
    this.width = 0

    this.anchorText = [0, 0]
    this.anchorIcon = [0, 0]

    this.textColor = 'black'
    this.textSize = 11
    this.textDecoration = 'none'
    this.fontWeight = 'bold'
    this.fontStyle = 'normal'
    this.fontFamily = 'Arial,sans-serif'

    this.backgroundPosition = '0 0'

    this.cMouseDownInCluster = null
    this.cDraggingMapByCluster = null
    this.timeOut = null;

    (this as unknown as google.maps.OverlayView).setMap(cluster.getMap()) // Note: this causes onAdd to be called

    this.onBoundsChanged = this.onBoundsChanged.bind(this)
    this.onMouseDown = this.onMouseDown.bind(this)
    this.onClick = this.onClick.bind(this)
    this.onMouseOver = this.onMouseOver.bind(this)
    this.onMouseOut = this.onMouseOut.bind(this)
    this.onAdd = this.onAdd.bind(this)
    this.onRemove = this.onRemove.bind(this)
    this.draw = this.draw.bind(this)
    this.hide = this.hide.bind(this)
    this.show = this.show.bind(this)
    this.useStyle = this.useStyle.bind(this)
    this.setCenter = this.setCenter.bind(this)
    this.getPosFromLatLng = this.getPosFromLatLng.bind(this)
  }

  onBoundsChanged() {
    this.cDraggingMapByCluster = this.cMouseDownInCluster
  }

  onMouseDown() {
    this.cMouseDownInCluster = true

    this.cDraggingMapByCluster = false
  }

  onClick(event: Event) {
    this.cMouseDownInCluster = false

    if (!this.cDraggingMapByCluster) {
      const markerClusterer = this.cluster.getClusterer()

      /**
       * This event is fired when a cluster marker is clicked.
       * @name MarkerClusterer#click
       * @param {Cluster} c The cluster that was clicked.
       * @event
       */
      google.maps.event.trigger(markerClusterer, 'click', this.cluster)
      google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster) // deprecated name

      // The default click handler follows. Disable it by setting
      // the zoomOnClick property to false.
      if (markerClusterer.getZoomOnClick()) {
        // Zoom into the cluster.
        const maxZoom = markerClusterer.getMaxZoom()

        const bounds = this.cluster.getBounds()

        const map = (markerClusterer as unknown as google.maps.OverlayView).getMap()

        if (map !== null && 'fitBounds' in map) {
          map.fitBounds(bounds)
        }


        // There is a fix for Issue 170 here:
        this.timeOut = window.setTimeout(() => {
          const map = (markerClusterer as unknown as google.maps.OverlayView).getMap()

          if (map !== null) {
            if ('fitBounds' in map) {
              map.fitBounds(bounds)
            }

            const zoom = map.getZoom() || 0

            // Don't zoom beyond the max zoom level
            if (
              maxZoom !== null &&
              zoom > maxZoom
            ) {
              map.setZoom(maxZoom + 1)
            }
          }
        }, 100)
      }

      // Prevent event propagation to the map:
      event.cancelBubble = true

      if (event.stopPropagation) {
        event.stopPropagation()
      }
    }
  }

  onMouseOver() {
    /**
     * This event is fired when the mouse moves over a cluster marker.
     * @name MarkerClusterer#mouseover
     * @param {Cluster} c The cluster that the mouse moved over.
     * @event
     */
    google.maps.event.trigger(
      this.cluster.getClusterer(),
      'mouseover',
      this.cluster
    )
  }

  onMouseOut() {
    /**
     * This event is fired when the mouse moves out of a cluster marker.
     * @name MarkerClusterer#mouseout
     * @param {Cluster} c The cluster that the mouse moved out of.
     * @event
     */
    google.maps.event.trigger(
      this.cluster.getClusterer(),
      'mouseout',
      this.cluster
    )
  }

  onAdd() {
    this.div = document.createElement('div')

    this.div.className = this.className

    if (this.visible) {
      this.show()
    }

    ;(this as unknown as google.maps.OverlayView).getPanes()?.overlayMouseTarget.appendChild(this.div)

    const map = (this as unknown as google.maps.OverlayView).getMap()

    if (map !== null) {
      // Fix for Issue 157
      this.boundsChangedListener = google.maps.event.addListener(
        map,
        'bounds_changed',
        this.onBoundsChanged
      )

      this.div.addEventListener('mousedown', this.onMouseDown)

      this.div.addEventListener('click', this.onClick)

      this.div.addEventListener('mouseover', this.onMouseOver)

      this.div.addEventListener('mouseout', this.onMouseOut)
    }
  }

  onRemove() {
    if (this.div && this.div.parentNode) {
      this.hide()

      if (this.boundsChangedListener !== null) {
        google.maps.event.removeListener(this.boundsChangedListener)
      }

      this.div.removeEventListener('mousedown', this.onMouseDown)

      this.div.removeEventListener('click', this.onClick)

      this.div.removeEventListener('mouseover', this.onMouseOver)

      this.div.removeEventListener('mouseout', this.onMouseOut)

      this.div.parentNode.removeChild(this.div)

      if (this.timeOut !== null) {
        window.clearTimeout(this.timeOut)

        this.timeOut = null
      }

      this.div = null
    }
  }

  draw() {
    if (this.visible && this.div !== null && this.center) {
      const pos = this.getPosFromLatLng(this.center)

      this.div.style.top = pos !== null ? `${pos.y}px` : '0'
      this.div.style.left = pos !== null ? `${pos.x}px` : '0'
    }
  }

  hide() {
    if (this.div) {
      this.div.style.display = 'none'
    }

    this.visible = false
  }

  show() {
    if (this.div && this.center) {
      const divTitle = this.sums === null ||
      typeof this.sums.title === 'undefined' ||
      this.sums.title === '' ? this.cluster.getClusterer().getTitle() :  this.sums.title

      // NOTE: values must be specified in px units
      const bp = this.backgroundPosition.split(' ')

      const spriteH = parseInt(bp[0]?.replace(/^\s+|\s+$/g, '') || '0', 10)
      const spriteV = parseInt(bp[1]?.replace(/^\s+|\s+$/g, '') || '0', 10)

      const pos = this.getPosFromLatLng(this.center)

      this.div.className = this.className
      this.div .setAttribute('style', `cursor: pointer; position: absolute; top: ${pos !== null ? `${pos.y}px` : '0'}; left: ${pos !== null ? `${pos.x}px` : '0'}; width: ${this.width}px; height: ${this.height}px; `)

      const img = document.createElement('img')

      img.alt = divTitle
      img.src = this.url
      img.width = this.width
      img.height = this.height
      img.setAttribute('style', `position: absolute; top: ${spriteV}px; left: ${spriteH}px`)

      if (!this.cluster.getClusterer().enableRetinaIcons) {
        img.style.clip = `rect(-${spriteV}px, -${spriteH + this.width}px, -${
          spriteV + this.height
        }, -${spriteH})`
      }

      const textElm = document.createElement('div')

      textElm .setAttribute('style', `position: absolute; top: ${this.anchorText[0]}px; left: ${this.anchorText[1]}px; color: ${this.textColor}; font-size: ${this.textSize}px; font-family: ${this.fontFamily}; font-weight: ${this.fontWeight}; fontStyle: ${this.fontStyle}; text-decoration: ${this.textDecoration}; text-align: center; width: ${this.width}px; line-height: ${this.height}px`)

      if (this.sums?.text) textElm.innerText = `${this.sums?.text}`
      if (this.sums?.html) textElm.innerHTML = `${this.sums?.html}`

      this.div.innerHTML = ''

      this.div.appendChild(img)
      this.div.appendChild(textElm)

      this.div.title = divTitle

      this.div.style.display = ''
    }

    this.visible = true
  }

  useStyle(sums: ClusterIconInfo) {
    this.sums = sums

    const styles = this.cluster.getClusterer().getStyles()

    const style =
      styles[Math.min(styles.length - 1, Math.max(0, sums.index - 1))]

    if (style) {
      this.url = style.url
      this.height = style.height
      this.width = style.width

      if (style.className) {
        this.className = `${this.clusterClassName} ${style.className}`
      }

      this.anchorText = style.anchorText || [0, 0]
      this.anchorIcon = style.anchorIcon || [this.height / 2, this.width / 2]

      this.textColor = style.textColor || 'black'

      this.textSize = style.textSize || 11

      this.textDecoration = style.textDecoration || 'none'

      this.fontWeight = style.fontWeight || 'bold'

      this.fontStyle = style.fontStyle || 'normal'

      this.fontFamily = style.fontFamily || 'Arial,sans-serif'

      this.backgroundPosition = style.backgroundPosition || '0 0'
    }
  }

  setCenter(center: google.maps.LatLng) {
    this.center = center
  }

  getPosFromLatLng(latlng: google.maps.LatLng): google.maps.Point | null {
    const pos = (this as unknown as google.maps.OverlayView).getProjection().fromLatLngToDivPixel(latlng)

    if (pos !== null) {
      pos.x -= this.anchorIcon[1]

      pos.y -= this.anchorIcon[0]
    }

    return pos
  }
}