import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
import MCSVehicle from './mcs-vehicle'
import { LEGEND_CRANE } from './features/mcs-status-default'

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

const GAP = 2

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

  get auxColor() {
    return 'black'
  }

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

  render(ctx: CanvasRenderingContext2D) {
    var { left, top, width, height } = this.bounds
    const { x: cx, y: cy } = this.center
    const rx = width / 2
    const ry = height / 2

    const round = Math.min(rx, ry) * 0.5

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

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

    const radius = Math.round(Math.min(width, height) * 0.1)
    ctx.roundRect(1, 0, width - 2, height, radius)
    ctx.roundRect(GAP + 1, GAP, width - (GAP + 1) * 2, height - GAP * 2, radius - 1)
    ctx.fill()
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(cx - left, cy - top, round, 0, Math.PI * 2)
    ctx.stroke()

    ctx.beginPath()
    ctx.roundRect(width / 2 - (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1)
    ctx.roundRect(width / 2 + (round * 2) / 4 - round / 8, height / 2 - (round * 6) / 5, round / 4, (round * 6) / 5, 1)

    ctx.fill()
    ctx.stroke()

    ctx.beginPath()

    // draw crane bar metapore
    ctx.strokeStyle = 'black'
    ctx.lineWidth = 3
    ctx.lineCap = 'butt'

    ctx.moveTo(GAP * 3, height / 2)
    ctx.lineTo(width - GAP * 3, height / 2)

    ctx.stroke()

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