import { HtmlNodeModel, HtmlNode } from '@logicflow/core'
import { colors } from './../config'

class ProcessTaskModel extends HtmlNodeModel {
  initNodeData(data) {
    super.initNodeData(data)
    this.height = 30
  }
  getNodeStyle() {
    const style = super.getNodeStyle()
    style.fill = colors.process.background
    style.strokeWidth = 1
    style.stroke = colors.process.border

    return style
  }
  getDefaultAnchor() {
    const { x, y, id } = this
    return [
      {
        x: x,
        y: y + 15,
        name: 'bottom',
        id: `${id}_0`
      },
      {
        x: x,
        y: y - 15,
        name: 'top',
        id: `${id}_0`
      }
    ]
  }
}

class ProcessTaskView extends HtmlNode {
  setHtml(rootEl) {
    const el = document.createElement('div')
    el.className = 'process-wrapper'

    el.innerHTML = `<div class="content"></div>`
    rootEl.innerHTML = ''
    rootEl.appendChild(el)
  }
}

export default {
  type: 'ProcessTask',
  view: ProcessTaskView,
  model: ProcessTaskModel
}
