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

interface CircleOptions extends OverlayOptions, PathOptions {
  center: Position
  radius: number
}

export default class Circle {
  private readonly id: string
  private readonly options: CircleOptions
  private readonly geoJSONSource: MapboxGL.GeoJSONSourceRaw

  constructor(options: CircleOptions) {
    this.options = options
    this.id = +new Date() + Math.floor(Math.random() * 100000) + ''
    this.geoJSONSource = {
      type: 'geojson',
      data: {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Point',
          coordinates: [options.center.lng, options.center.lat],
        },
      },
    }

    this.options.map.map.on('load', () => {
      this.options.map.map.addLayer({
        id: this.id,
        type: 'circle',
        source: this.geoJSONSource,
        layout: {},
        paint: {
          'circle-radius': this.options.radius || 100,
          'circle-stroke-width': this.options.strokeWeight || 3,
          'circle-stroke-color': this.options.strokeColor || '#3085fc',
          'circle-stroke-opacity': this.options.strokeOpacity || 1.0,
          'circle-color': (this.options.fill !== false && (this.options.fillColor || '#3085fc')) || 'transparent',
          'circle-opacity': this.options.fillOpacity || 0.6,
        },
        filter: ['==', '$type', 'Point'],
      })
    })
  }

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