import shapes from '../../constants/shapes'
import Dom from '../../libs/dom'
import util from '../../libs/util'
import Widget from '../widget'

class Shape extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    this._container = Dom.createElement('div', 'shape-container comp', this.el)
    this.on('resize', () => {
      this.setPaint()
    })
  }

  setPaint() {
    this.setListener()
    let newPaint = this._mergePaint()
    let {width, height} = this.layer.layout
    let gradients = ''
    let fillColor = newPaint.fillColor
    if (Array.isArray(newPaint.fillColor)) {
      if (newPaint.fillColor.length > 1) {
        let gradient = util.gradient(
          'svg',
          newPaint.gradientDirection,
          ...newPaint.fillColor
        )
        gradients += gradient.gradient
        fillColor = `url(#${gradient.id})`
      } else {
        fillColor = newPaint.fillColor[0]
      }
    }
    let scaleX = width / 1024
    let scaleY = height / 1024
    let svg = `
      <svg viewBox="0 0 1024 1024" width="1024px" height="1024px" style="transform: scale(${scaleX}, ${scaleY});transform-origin: 0 0;">
        <defs>${gradients}</defs>
        <path class="shape" 
          d="${shapes[newPaint.style]}"
          stroke="${newPaint.borderColor}" 
          stroke-width="${newPaint.borderWidth}" 
          fill="${fillColor}"
        >
        </path>
      </svg>`
    this._container.innerHTML = svg
  }
}

export default Shape
