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 GAP = 2

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

  get auxColor() {
    return 'black'
  }

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

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

    ctx.translate(left, top)
    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(0, 0, width, height, radius)
    // ctx.roundRect(GAP, GAP, width - GAP * 2, height - GAP * 2, radius - 1)
    ctx.rect(0, 0, width, height)
    ctx.rect(GAP, GAP, width - GAP * 2, height - GAP * 2)

    ctx.fill()
    ctx.stroke()

    ctx.beginPath()

    ctx.lineCap = 'butt'
    ctx.strokeStyle = 'black'
    ctx.lineWidth = 3
    ctx.moveTo(width / 2, GAP * 2)
    ctx.lineTo(width / 2, height - GAP * 2)

    ctx.stroke()

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