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

interface PolylineOptions extends OverlayOptions, PathOptions {
  path: Position[][]
  lineStyle?: string
}

export default class Polyline {
  private readonly id: string
  private readonly options: PolylineOptions
  private readonly geoJSONSource: MapboxGL.GeoJSONSourceRaw

  constructor(options: PolylineOptions) {
    this.options = options
    this.id = +new Date() + Math.floor(Math.random() * 100000) + ''
    this.geoJSONSource = {
      type: 'geojson',
      data: {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [...([] as Position[]).concat(...this.options.path).map((item) => [item.lng, item.lat])],
        },
      },
    }

    const paintOptions: MapboxGL.LinePaint = {
      'line-width': this.options.strokeWeight || 3,
      'line-color': this.options.strokeColor || '#3085fc',
      'line-opacity': this.options.strokeOpacity || 1.0,
    }

    switch (this.options.lineStyle) {
      case 'dash':
        paintOptions['line-dasharray'] = [2, 2]
    }

    this.options.map.map.addLayer({
      id: this.id,
      type: 'line',
      source: this.geoJSONSource,
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
      },
      paint: paintOptions,
    })
  }

  remove() {
    this.options.map.map.removeLayer(this.id)
  }
}