const drawElementFromCanvas = (
  element,
  context,
) => {
  const { start, end, strokeStyle, lineWidth } = element
  let { left, top, width, height } = element.rect;
  context.save();
  context.strokeStyle = strokeStyle
  context.lineWidth = lineWidth
  const ratio = window.devicePixelRatio
  switch (element.type) {
    case 'line':
      context.beginPath()
      context.moveTo(start.x * ratio, start.y * ratio)
      context.lineTo(end.x * ratio, end.y * ratio)
      context.stroke()
      break;
    case "square":
      context.lineJoin = "round";
      context.lineCap = "round";
      context.beginPath()
      context.strokeRect(left * ratio, top * ratio, width * ratio, height * ratio)
      context.stroke();
      break;
    case "circle": {
      context.lineJoin = "round";
      context.lineCap = "round";
      context.ellipse(width * ratio / 2, height * ratio /2, width * ratio / 2, height * ratio / 2, Math.PI/4, 0, 2*Math.PI)
      context.stroke();
      break;
    }
  }
  context.restore();

  // Clear the nested element we appended to the DOM
};

export const renderElement = ({
  element,
  context,
  renderConfig
}) => {
  switch (element.type) {
    case "freedraw": {
      drawElementFromCanvas(element, context, renderConfig);
      break;
    }
    case "square":
    case "circle":
    case "line":
    case "arrow":
    case "image":
    case "text": {
      // generateElementShape(element);

      // const elementWithCanvas = generateElementWithCanvas(
      //   element,
      //   renderConfig,
      // );
      drawElementFromCanvas(element, context, renderConfig);
      break;
    }
    default: {
      // @ts-ignore
      throw new Error(`Unimplemented type ${element.type}`);
    }
  }
};
