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

const NATURE: ComponentNature = {
  mutable: false,
  resizable: true,
  rotatable: true,
  properties: [
    {
      type: 'select',
      label: 'conveyor-type',
      name: 'conveyorType',
      property: {
        options: ['', 'conveyor', 'belt', 'rail']
      }
    },
    {
      type: 'select',
      label: 'conveyor-orientation',
      name: 'orientation',
      property: {
        options: ['', 'horizontal', 'vertical']
      }
    },
    ...MCSTransport.properties
  ]
}

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

  get auxColor() {
    return '#777'
  }

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

  containable(component: Component) {
    return ['Shuttle', 'Port', 'Node'].includes(component.state.type)
  }

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

    const rollWidth = Math.max(10, Math.min(width, height) / 2)

    ctx.beginPath()
    ctx.fillStyle = this.statusColor!
    ctx.strokeStyle = this.auxColor!
    ctx.lineWidth = 1

    ctx.translate(left, top)
    ctx.rect(0, 0, width, height)
    ctx.fill()
    ctx.stroke()

    ctx.beginPath()
    ctx.strokeStyle = '#aaa'

    if (width > height) {
      for (let d = 0; d < width; d += rollWidth) {
        ctx.moveTo(d, 0)
        ctx.lineTo(d, height)
      }
    } else {
      for (let d = 0; d < height; d += rollWidth) {
        ctx.moveTo(0, d)
        ctx.lineTo(width, d)
      }
    }

    ctx.stroke()

    ctx.translate(-left, -top)
  }

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

    ctx.beginPath()

    ctx.translate(left, top)

    ctx.fillStyle = this.statusColor!

    if (width > height) {
      ctx.fillRect(0, 0, width, (height * 1) / 5)
      ctx.fillRect(0, (height * 4) / 5, width, (height * 1) / 5)
    } else {
      ctx.fillRect(0, 0, (width * 1) / 5, height)
      ctx.fillRect((width * 4) / 5, 0, (width * 1) / 5, height)
    }

    ctx.translate(-left, -top)
  }

  render(ctx: CanvasRenderingContext2D) {
    const { conveyorType } = this.state

    if (conveyorType == 'rail') {
      this.renderRtvRail(ctx)
    } else {
      this.renderConveyor(ctx)
    }
  }
}