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

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

const RAILWIDTH = 2
@sceneComponent('Shuttle')
export default class Shuttle extends MCSVehicle {
  static get nature() {
    return NATURE
  }

  get auxColor() {
    return 'black'
  }

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

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

    ctx.translate(left, top)

    // draw rail metapore
    ctx.beginPath()

    ctx.strokeStyle = 'black'
    ctx.lineWidth = RAILWIDTH * 2

    ctx.moveTo(0, 0)
    ctx.lineTo(0, height)
    ctx.moveTo(width, 0)
    ctx.lineTo(width, height)
    ctx.stroke()

    // draw body
    ctx.beginPath()

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

    // Performance aware
    // const radius = Math.round(Math.min(width, height) * 0.1)

    // ctx.roundRect(RAILWIDTH / 2, RAILWIDTH / 2, width - RAILWIDTH, height - RAILWIDTH, radius)
    // ctx.fill()

    // ctx.beginPath()
    // ctx.roundRect(0, RAILWIDTH, width, RAILWIDTH, radius)
    // ctx.roundRect(0, height - RAILWIDTH * 2, width, RAILWIDTH, radius)

    ctx.rect(RAILWIDTH / 2, RAILWIDTH / 2, width - RAILWIDTH, height - RAILWIDTH)
    ctx.fill()

    ctx.beginPath()
    ctx.rect(0, RAILWIDTH, width, RAILWIDTH)
    ctx.rect(0, height - RAILWIDTH * 2, width, RAILWIDTH)

    ctx.fill()
    ctx.stroke()

    ctx.translate(-left, -top)

    // Performance aware
    // this.renderDirection(ctx)
  }
}