import { Element } from 'diagram-js/lib/model/Types';
import { Outline } from 'diagram-js/lib/features/outline/OutlineProvider';
import OutlineProvider 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(outline:OutlineProvider, 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",
    });

    console.log(outline);
    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",
    });
  }
  console.log(outline);

  return false;
}

const CustomOutlineModule = {
  __init__: ['outlineProvider'],
  __depends__: [ 'Outline' ],
  outlineProvider: ['type', CustomOutlineProvider]
};

export default CustomOutlineModule;