import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import { assign } from 'min-dash';
import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate
} from 'tiny-svg';
import { data } from './AddObjectForm.svelte';


const HIGH_PRIORITY = 1500;

class CustomShapeRenderer extends BaseRenderer {
  
  static $inject = ['eventBus', 'styles'];

  constructor(eventBus: any, styles: any) {
    super(eventBus, HIGH_PRIORITY);
    this.styles = styles;
    this.SHAPE_STYLE = styles.style({ fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 });
  }

  canRender(element: any): boolean {
    return element.type === 'custom:circle';
  }


  drawShape(visuals, element, attrs): SVGElement {
    console.log(data);
    var circle = svgCreate('circle');

    svgAttr(circle, {
      cx: `${element.width / 2}`,
      cy: `${element.height / 2 - 40}`,
      r: '2.5mm',
      fill: "none",
      stroke: "CanvasText",
    });

    var line = svgCreate('line');
    svgAttr(line, {
      x1: element.width / 2,
      x2: element.width / 2,
      y1: element.height/2,
      y2: element.height/2 - 30 - 2,
      stroke: "CanvasText",
      
    })

    var g = svgCreate('g');
    svgAppend(g, circle);
    svgAppend(g, line);

    svgAttr(g, assign({}, this.SHAPE_STYLE, attrs || {}));
    svgAppend(visuals, g);
    return g;
  }
}


const CustomShapeRendererModule = {
  __init__: ['customShapeRenderer'],
  customShapeRenderer: ['type', CustomShapeRenderer]
};


export default CustomShapeRendererModule;