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

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

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

  get auxColor() {
    return 'black'
  }

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

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

    ctx.save()

    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.rect(0, 0, width, height)

    ctx.clip()

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

    ctx.fill()
    ctx.stroke()

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