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

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

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

  containable(component: Component) {
    return ['AGV', 'Node'].includes(component.state.type)
  }

  get auxColor() {
    return '#333'
  }

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

  render(context: CanvasRenderingContext2D) {
    const { left, top, width, height } = this.bounds

    context.beginPath()

    context.translate(left, top)

    context.fillStyle = this.statusColor!
    context.strokeStyle = this.auxColor!
    context.setLineDash([3])

    context.fillRect(0, 0, width, height)

    if (width > height) {
      context.moveTo(0, 0)
      context.lineTo(width, 0)
      // context.moveTo(0, height / 2)
      // context.lineTo(width, height / 2)
      context.moveTo(0, height)
      context.lineTo(width, height)
    } else {
      context.moveTo(0, 0)
      context.lineTo(0, height)
      // context.moveTo(width / 2, 0)
      // context.lineTo(width / 2, height)
      context.moveTo(width, 0)
      context.lineTo(width, height)
    }

    context.stroke()

    context.translate(-left, -top)
  }
}