import * as MapboxGL from 'mapbox-gl'
import Marker from './marker'

interface TooltipOptions {
  marker: Marker
  content: string
  maxWidth?: number
}

export default class ToolTip {
  private readonly _tooltip: MapboxGL.Popup
  private readonly options: TooltipOptions

  constructor(options: TooltipOptions) {
    this.options = options
    this._tooltip = new MapboxGL.Popup()
    if (!options.marker) {
      console.warn('must provide a valid marker instance to enable the tooltip')
      return
    }
    this._tooltip.setHTML(`<div style="max-width: ${options.maxWidth + 'px' || 'auto'};">${options.content}</div>`)
    options.marker.marker.setPopup(this._tooltip)
    const markerEl = options.marker.marker.getElement()
    markerEl.addEventListener('mouseenter', () => options.marker.marker.togglePopup())
    markerEl.addEventListener('mouseleave', () => options.marker.marker.togglePopup())
  }

  get tooltip() {
    return this._tooltip
  }

  open() {
    if (!this._tooltip.isOpen()) {
      this._tooltip.addTo(this.options.marker.map)
    }
  }

  close() {
    if (this._tooltip.isOpen()) {
      this._tooltip.remove()
    }
  }
}