import Dom from '../../libs/dom'
import Widget from '../widget'
import mapboxEmptyStyle from '../../constants/mapbox_empty_style'
import {cloneDeep, isEqual} from 'lodash'
//import elementResizeEvent from 'element-resize-event'

class Map extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    if (!window.VMap) {
      throw new Error(
        `Error in component "${this.name}(${this.id})": "VMap" is undefined, make sure you have installed '@geoway/vmap' library`
      )
    }
    this._container = Dom.createElement('div', 'map-container comp', this.el)
    Dom.css(this._container, {
      width: this.el.style.width,
      height: this.el.style.height
    })
    window.MAP = this.map = null
    this.originalOptions = {}
    /*this.on('resize', () => {
      Dom.css(this._container, {
        width: this.el.style.width,
        height: this.el.style.height
      })
      this.map.resize()
    })
    elementResizeEvent(this.el, () => {
      this.fire('resize')
    })*/
  }

  setPaint() {
    this.setListener()
    let paint = this.processPlaceholder(this.layer.paint)
    if (!this.map) {
      this._initMap(paint)
      return
    }
    let options = this._getOptions(paint)
    if (!isEqual(options.style, this.originalOptions.style)) {
      this.map.setStyle(options.style)
    }
    if ( options.center && !isEqual(options.center, this.originalOptions.center)) {
      this.map.setCenter(options.center)
    }
    if (options.zoom !== undefined && options.zoom != this.originalOptions.zoom) {
      this.map.setZoom(options.zoom)
    }
    if (options.bearing !== undefined && options.bearing != this.originalOptions.bearing) {
      this.map.setBearing(options.bearing)
    }
    if (options.pitch !== undefined && options.pitch != this.originalOptions.pitch) {
      this.map.setPitch(options.pitch)
    }
    this.originalOptions = options
  }

  _initMap(paint) {
    let options = this._getOptions(paint)
    this.originalOptions = options
    this.map = new VMap.Map(options)
  }

  _getOptions(paint) {
    let {center, zoom, bearing, pitch, map} = paint
    let options = {
      container: this._container
    }
    if (center) {
      options.center = center
    }
    if (zoom !== undefined) {
      options.zoom = zoom
    }
    if (pitch !== undefined) {
      options.pitch = pitch
    }
    if (bearing !== undefined) {
      options.bearing = bearing
    }
    let baseMapStyle = cloneDeep(mapboxEmptyStyle)
    // options.style应为符合专题地图样式规范
    if (!map) {
      options.style = {
        basemap: {
          style: baseMapStyle
        },
        layers: []
      }
    } else {
      if (map.type === 'basemap') {
        options.style = {
          basemap: {
            style: map.style
          },
          layers: []
        }
      } else if (map.type === 'vmap') {
        options.style = map.style
      } else {
        baseMapStyle.sources.basemap = {
          type: 'raster',
          tiles: [map.style],
          tileSize: map.tileSize || 256
        }
        baseMapStyle.layers.push({
          id: 'basemap',
          type: 'raster',
          source: 'basemap'
        })
        options.style = {
          basemap: {
            style: baseMapStyle
          },
          layers: []
        }
      }
    }
    return options
  }
}

export default Map
