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

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

  setPaint() {
    this.setListener()
    let newPaint = this._mergePaint()

    if (this.originalData && this.originalData.length !== 0) {
      if (Number.isNaN(+newPaint.data.value)) {
        newPaint.data.value = this.originalData[0][newPaint.data.value] || 0
      }
      if (Number.isNaN(+newPaint.data.total)) {
        newPaint.data.total = this.originalData[0][newPaint.data.total] || 0
      }
    } else {
      newPaint.data.value = +newPaint.data.value || 0
      newPaint.data.total = +newPaint.data.total || 0
    }
    let outerElement =
      this._container.querySelector('.outer') ||
      Dom.createElement('div', 'outer', this._container)
    let innerElement =
      outerElement.querySelector('.inner') ||
      Dom.createElement('div', 'inner', outerElement)
    let labelElement =
      this._container.querySelector('.label') ||
      Dom.createElement('div', 'label', this._container)
    if (
      newPaint.label.position === 'left' ||
      newPaint.label.position === 'top'
    ) {
      this._container.insertBefore(labelElement, outerElement)
    } else {
      this._container.appendChild(labelElement)
    }
    let decimalDigits = newPaint.label.decimalDigits
    let percent = ((+newPaint.data.value / +newPaint.data.total) * 100).toFixed(
      +decimalDigits
    )
    //percent = (percent > 100 ? 100 : percent).toFixed(+decimalDigits)
    //percent = isNaN(percent) ? 0 : percent
    if (Array.isArray(newPaint.bar.backgroundColor)) {
      newPaint.bar.backgroundColor = util.gradient(
        'css',
        newPaint.bar.gradientDirection,
        ...newPaint.bar.backgroundColor
      )
    }
    if (Array.isArray(newPaint.bar.color)) {
      newPaint.bar.color = util.gradient(
        'css',
        newPaint.bar.gradientDirection,
        ...newPaint.bar.color
      )
    }
    let outerBackground = ''
    let innerBackground = ''
    if (newPaint.bar.backgroundImage) {
      outerBackground = `url(${newPaint.bar.backgroundImage})`
    } else {
      outerBackground = newPaint.bar.backgroundColor
    }
    if (newPaint.bar.image) {
      innerBackground = `url(${newPaint.bar.image})`
    } else {
      innerBackground = newPaint.bar.color
    }
    let outerStyles = {
      width: '100%',
      height: newPaint.bar.strokeWidth + 'px',
      margin: `0 ${newPaint.bar.rightGap}px 0 ${newPaint.bar.leftGap}px`,
      background: outerBackground
    }
    let innerStyles = {
      height: '100%',
      width: (percent > 100 ? 100 : percent) + '%',
      float: newPaint.bar.align,
      background: innerBackground
    }
    outerStyles.borderRadius = innerStyles.borderRadius =
      newPaint.bar.endShape === 'round' ? '100px' : 0
    Dom.css(outerElement, outerStyles)
    Dom.css(innerElement, innerStyles)
    Dom.css(labelElement, {
      color: newPaint.label.color,
      fontSize: newPaint.label.fontSize + 'px'
    })
    labelElement.innerHTML = newPaint.label.content
      .replace('{percent}', percent + '%')
      .replace('{value}', newPaint.data.value)
      .replace('{total}', newPaint.data.total)
  }
}

export default ProgressBar
