import { Component } from '@hatiolab/things-scene'

import ControlBase, { DIRECTION, INOUT, NODE, PIPELINE } from './base/control-base'

const IMAGE = new URL('../icons/detour.png', import.meta.url).href

const NATURE = {
  mutable: false,
  resizable: false,
  rotatable: false,
  properties: []
}

export default class Detour extends ControlBase {
  static IMAGE: HTMLImageElement

  static get nature() {
    return NATURE
  }

  get nodes(): NODE[] {
    return [
      {
        name: 'InMessage',
        description: 'Message inlet',
        inout: INOUT.IN,
        type: PIPELINE.MESSAGE,
        direction: DIRECTION.WEST,
        multiplicity: 1
      },
      {
        name: 'InControl',
        description: 'Control inlet',
        inout: INOUT.IN,
        type: PIPELINE.MESSAGE,
        direction: DIRECTION.SOUTH,
        multiplicity: 1
      },
      {
        name: 'OutDetour',
        description: 'Detoured outlet',
        inout: INOUT.OUT,
        type: PIPELINE.MESSAGE,
        direction: DIRECTION.NORTH,
        multiplicity: 1
      },
      {
        name: 'OutMessage',
        description: 'Message outlet',
        inout: INOUT.OUT,
        type: PIPELINE.MESSAGE,
        direction: DIRECTION.EAST,
        multiplicity: 1
      }
    ]
  }

  getImageElement(): HTMLImageElement {
    if (!Detour.IMAGE) {
      Detour.IMAGE = new Image()
      Detour.IMAGE.src = IMAGE
    }

    return Detour.IMAGE
  }
}

Component.register('detour', Detour)