import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
import MCSMachine from './mcs-machine'

const NATURE: ComponentNature = {
  mutable: false,
  resizable: true,
  rotatable: true,
  properties: [...MCSMachine.properties]
}

@sceneComponent('Buffer')
export default class Buffer extends MCSMachine {
  static get nature() {
    return NATURE
  }

  getLegendFallback() {
    return (this.root as any).bufferLegendTheme || super.getLegendFallback()
  }

  containable(component: Component) {
    return super.containable(component) || ['Port'].includes(component.state.type)
  }

  render(ctx) {
    var { lineWidth } = this.state
    var { left, top, width, height } = this.bounds

    const offset = Math.round(Math.min(width, height) * 0.2)

    ctx.beginPath()
    ctx.translate(left, top)

    ctx.strokeStyle = this.auxColor
    ctx.fillStyle = this.statusColor!
    ctx.lineWidth = lineWidth || 1
    ctx.lineCap = 'round'
    ctx.setLineDash([])

    ctx.moveTo(offset, 0)
    ctx.lineTo(width - offset, 0)
    ctx.lineTo(width, height / 2)
    ctx.lineTo(width - offset, height)
    ctx.lineTo(offset, height)
    ctx.lineTo(0, height / 2)
    ctx.lineTo(offset, 0)

    ctx.translate(-left, -top)

    ctx.fill()
    ctx.stroke()
  }
}