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

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

const NATURE = {
  mutable: false,
  resizable: true,
  rotatable: false,
  properties: [
    {
      type: 'select',
      name: 'messageType',
      label: 'message-type',
      property: {
        options: [
          {
            display: '',
            value: ''
          },
          {
            display: 'invalid',
            value: 'invalid'
          },
          {
            display: 'guaranteed',
            value: 'guaranteed'
          },
          {
            display: 'dead-letter',
            value: 'dead-letter'
          }
        ]
      }
    }
  ],
  help: '/eipatterns/messaging-channel/messaging-channel'
}

export default class MessagingChannel extends ControlBase {
  private imageElement?: HTMLImageElement

  static get nature() {
    return NATURE
  }

  get nodes(): NODE[] {
    return [
      {
        name: 'In',
        description: 'Message inlet',
        inout: INOUT.IN,
        type: PIPELINE.MESSAGE,
        direction: DIRECTION.WEST,
        multiplicity: 1
      },
      {
        name: 'Out',
        description: 'Message outlet',
        inout: INOUT.OUT,
        type: PIPELINE.MESSAGE,
        direction: DIRECTION.EAST
      }
    ]
  }

  render(ctx: CanvasRenderingContext2D) {
    const { left, top, width, height } = this.bounds
    const rx = Math.abs(height / 12)
    const ry = Math.abs(height / 8)
    const startAngle = (Math.PI * 3) / 2
    const endAngle = Math.PI / 2
    const sy = (height * 3) / 8
    const cy = height / 2
    const ey = (height * 5) / 8
    const isize = (height * 3) / 8

    ctx.translate(left, top)
    ctx.beginPath()

    ctx.ellipse(width - rx, cy, rx, ry, 0, startAngle, startAngle - Math.PI * 2, true)

    ctx.lineTo(rx, sy)
    ctx.ellipse(rx, cy, rx, ry, 0, startAngle, endAngle, true)
    ctx.lineTo(width - rx, ey)

    this.drawFill(ctx)
    this.drawStroke(ctx)

    ctx.beginPath()

    const image = this.getImageElement()
    if (image) {
      this.drawImage(ctx, image, width / 2 - isize / 2, height - isize, isize, isize)
    }

    ctx.translate(-left, -top)
  }

  onchange(after: Properties, before: Properties) {
    if ('messageType' in after || 'strokeStyle' in after) {
      delete this.imageElement
    }
  }

  getImageElement(): HTMLImageElement | undefined {
    if (!this.imageElement) {
      const { messageType, strokeStyle } = this.state

      if (!messageType) {
        return
      }

      const src = IMAGES[messageType]
      if (!src) {
        return
      }

      this.imageElement = new Image()
      this.imageElement.src =
        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(src.replace(/{{strokeColor}}/g, strokeStyle))
    }

    return this.imageElement
  }
}

Component.register('messaging-channel', MessagingChannel)

const IMAGES = {
  'dead-letter': `
  <svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:{{strokeColor}};}
  </style>
  <g>
    <path class="st0" d="M9.7,10.3l11.1,6.1c0.2,0.1,0.5,0.2,0.7,0.2c0.4,0,0.7-0.1,1-0.4l4.9-4.3l-2,12.7l-10.1-6c-0.2-0.1-0.5-0.2-0.8-0.2
      c-0.3,0-0.7,0.1-0.9,0.3l-6,4.7L9.7,10.3 M29.5,8l-8,7.1L8.5,8l-3,19l9-7.1l12,7.1L29.5,8L29.5,8z"/>
  </g>
  </svg>
  `,
  invalid: `
  <svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:{{strokeColor}};}
  </style>
  <g>
    <polygon class="st0" points="26.5,27 29.5,8 21.5,15.1 8.5,8 5.5,27 14.5,19.9 	"/>
  </g>
  </svg>
  `,
  guaranteed: `
  <svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
    <style type="text/css">
     .st0{fill:{{strokeColor}};}
    </style>
    <polygon class="st0" points="17.5,26.9 7.5,27 17.5,8 27.5,27 "/>
  </svg>
  `
}