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 === 'custom:circle') {
    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 === 'custom:circle') {
    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]
}