import * as MapboxGL from 'mapbox-gl'
import OverlayOptions from './base-overlay'
import { Position } from './geo'

interface PopupOptions extends OverlayOptions {
  position: Position
  content: string
  maxWidth?: number
}

export default class Popup {
  private readonly _popup: MapboxGL.Popup
  private readonly options: PopupOptions

  constructor(options: PopupOptions) {
    this.options = options
    this._popup = new MapboxGL.Popup()
    if (!options.position) {
      console.warn('must provide a valid position to add the popup')
      return
    }
    this._popup
      .setHTML(`<div style="max-width: ${options.maxWidth + 'px' || 'auto'};">${options.content}</div>`)
      .setLngLat([options.position.lng, options.position.lat])
      .addTo(options.map.map)
  }

  get popup() {
    return this._popup
  }

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

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