import Dom from '../../libs/dom'
import Widget from '../widget'

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

  setPaint() {
    this.setListener()
    this._container.innerHTML = ''
    let newPaint = this._mergePaint()
    let field = newPaint.textField
    // let type = newPaint.textType || 'string'
    let text = ''
    if (this.originalData && this.originalData.length !== 0 && field) {
      text = this.originalData[0][field]
    }
    let element = Dom.createElement('marquee', '', this._container)
    element.setAttribute('scrollamount', newPaint.speed)
    element.innerText = text || newPaint.text
    Dom.css(this._container, {
      fontSize: newPaint.fontSize + 'px',
      fontWeight: newPaint.bold ? 'bold' : 'normal',
      fontStyle: newPaint.italic ? 'italic' : 'normal',
      color: newPaint.fontColor,
      fontFamily: newPaint.fontFamily
    })
  }
}

export default Marquee
