import { Component, ComponentNature, sceneComponent } from '@hatiolab/things-scene'
import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
import MCSCarrierHolder from './mcs-carrier-holder'

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

@sceneComponent('Port')
export default class Port extends MCSZoneMixin(MCSCarrierHolder) {
  static get nature() {
    return NATURE
  }

  get auxColor() {
    return 'black'
  }

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

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

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

    ctx.beginPath()

    // Performance aware
    // const radius = Math.round(Math.min(width, height) * 0.1)
    // ctx.roundRect(left, top, width, height, radius)
    ctx.rect(left, top, width, height)

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