/* eslint-disable import/prefer-default-export */
// eslint-disable-next-line import/prefer-default-export
import Ellipse from '../../../src/components/Ellipse';
import Workspace from '../../../src/components/Workspace';

export const createEllipse = ({
  backgroundColor,
  strokeColor,
  strokeWidth,
  onClick,
  strokeStyle,
  size,
  arc,
}) => {
  const divElem = document.createElement('div');

  const workspace = new Workspace();
  workspace.setSize('400px', '400px');
  workspace.setCoordSize(300, 300);
  workspace.setCoordOrigin(-150, -150);

  const rect = new Ellipse(arc);
  rect.setFill(backgroundColor);

  const parsedSize = JSON.parse(size);
  rect.setSize(parsedSize.width, parsedSize.height);

  rect.setPosition(0, 0);

  rect.setStroke(strokeWidth, strokeStyle, strokeColor, 1);

  rect.addEvent('click', onClick);

  // Add referene point ...
  const e1 = new Ellipse();
  e1.setSize(5, 5);
  e1.setPosition(0, 0);
  e1.setFill('red');

  workspace.append(rect);
  workspace.append(e1);
  workspace.addItAsChildTo(divElem);

  return divElem;
};