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

interface PolygonOptions extends OverlayOptions, PathOptions {
  path: Position[]
}

export default class Polygon {
  private readonly id: string
  private readonly options: PolygonOptions
  private readonly geoJSONSource: MapboxGL.GeoJSONSourceRaw

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

    this.options.map.map.addLayer({
      id: this.id,
      type: 'fill',
      source: this.geoJSONSource,
      layout: {},
      paint: {
        'fill-color': (this.options.fill !== false && (this.options.fillColor || '#3388ff')) || 'transparent',
        'fill-opacity': this.options.fillOpacity || 0.35,
      },
    })
    this.options.map.map.addLayer({
      id: +new Date() + '',
      type: 'line',
      source: this.geoJSONSource,
      layout: {},
      paint: {
        'line-width': this.options.strokeWeight || 3,
        'line-color': this.options.strokeColor || '#3085fc',
        'line-opacity': this.options.strokeOpacity || 1.0,
      },
    })
  }

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