import Dom from '../../libs/dom'
import Widget from '../widget'
import * as VLegend from '@geoway/vmap-legend'
const fontSize = {
  small: 14,
  middle: 16,
  large: 18
}

class Legend extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this._container = Dom.createElement('div', 'legend-container comp', this.el)
  }

  setPaint() {
    this.setListener()
    this._container.innerHTML = ''
    let newPaint = this._mergePaint()
    let mapComponent = this._screen.getComponent(newPaint.mapId)
    if (!mapComponent) {
      throw new Error(`Can't find the reference map component!`)
    }
    let mapStyle = mapComponent.map.getStyle()
    let borderRadius = (Array.isArray(newPaint.borderRadius)?newPaint.borderRadius.join('px ') : newPaint.borderRadius) + 'px'
    Dom.css(this._container, {
      backgroundColor: newPaint.backgroundColor,
      borderColor: newPaint.borderColor,
      borderWidth: newPaint.borderWidth + 'px',
      borderStyle: 'solid',
      borderRadius,
      color: newPaint.fontColor
    })
    let config = {
      title: {
        fontSize: fontSize[newPaint.fontSize] + 6
      },
      layer: {
        fontSize: fontSize[newPaint.fontSize] + 2
      },
      item: {
        width: newPaint.itemWidth,
        height: newPaint.itemHeight,
        fontSize: fontSize[newPaint.fontSize]
      }
    }
    VLegend.setConfig(config)
    VLegend.createLegend({
      container: this._container,
      style: mapStyle
    })
  }
}

export default Legend
