import { Component } from '@hatiolab/things-scene'
type Constructor<T = {}> = new (...args: any[]) => T

function pattern(component: any) {
  var { height } = component.bounds

  var { rollWidth = 10 } = component.model

  var width = Math.max(rollWidth, 1)

  var color = component.statusColor!
  var stroke = component.auxColor!
  var lineWidth = 1

  if (!component._pattern) {
    component._pattern = document.createElement('canvas')
  }

  component._pattern.width = width
  component._pattern.height = height

  var context = component._pattern.getContext('2d')

  context.beginPath()
  context.fillStyle = color
  context.strokeStyle = stroke
  context.lineWidth = lineWidth

  context.moveTo(0, 0)
  context.lineTo(width, 0)
  context.lineTo(width, height)
  context.lineTo(0, height)
  context.lineTo(0, 0)
  context.fill()

  context.beginPath()

  context.globalAlpha = 0.2

  var x_for_belt = (component._step || 0) % width
  if (component.value == 2) {
    x_for_belt = width - x_for_belt
  }

  context.moveTo(x_for_belt, height)
  context.lineTo(x_for_belt, 0)

  context.stroke()

  return component._pattern
}

export function ConveyorMixin<TBase extends new (...args: any[]) => any>(Base: TBase): any {
  const A = class extends Base {
    _pattern

    dispose() {
      super.dispose()
      delete this._pattern
    }

    get fillStyle() {
      return {
        image: pattern(this),
        offsetX: 0,
        offsetY: 0,
        type: 'pattern'
      }
    }
  }

  Component.memoize(A.prototype, 'fillStyle', false)

  return A
}