import { Element } from 'diagram-js/lib/model/Types'
import { Outline } from 'diagram-js/lib/features/outline/OutlineProvider'

import { attr as svgAttr, create as svgCreate } from 'tiny-svg'

import Styles from 'diagram-js/lib/draw/Styles'

function CustomOutlineProvider(this: any, outline: Outline, styles: Styles) {
  this._styles = styles
  outline.registerProvider(this)
}

CustomOutlineProvider.$inject = ['outline', 'styles']

//CustomOutlineProvider.prototype.getOutline = function(element:Element) {
//  if (element.type === 'mechanism') {
//    const outline = svgCreate('circle');
//
//    svgAttr(outline , {
//      x: `${element.x}`,
//      y: `${element.y}`,
//      cx: element.width / 2,
//      cy: element.height / 2,
//      r: 60,
//      fill: "none",
//    });
//    return outline;
//  }
//}

CustomOutlineProvider.prototype.updateOutline = function (
  element: Element,
  outline: Outline
) {
  if (element.type === 'mechanism') {
    outline = svgCreate('rect')

    svgAttr(outline, {
      x: `${element.x}`,
      y: `${element.y}`,
      cx: element.width / 2,
      cy: element.height / 2,
      r: 60,
      fill: 'none',
    })
  }

  return false
}

import Ouline from 'diagram-js/lib/features/outline' // idk why it's called such way

export default {
  __init__: ['outlineProvider'],
  __depends__: [Ouline],
  outlineProvider: ['type', CustomOutlineProvider],
}