type Coordinates = {
  x: number | null;
  y: number | null;
};

type CreatePolylineType = (
  (
    penCoordinates: Coordinates, color: string, opacity: number, strokeWidth: number,
  ) => SVGPolylineElement
);

type CompletePathType = (
  (pathElement: SVGPolylineElement | null, penCoordinates: Coordinates) => void
);

export const createPolyline: CreatePolylineType = (penCoordinates, color, opacity, strokeWidth) => {
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
  path.setAttribute('fill', 'none');
  path.setAttribute('stroke', color);
  path.setAttribute('stroke-width', strokeWidth.toString());
  path.setAttribute('stroke-opacity', (opacity * 0.01).toString());
  path.setAttribute('points', `${penCoordinates.x},${penCoordinates.y}`);
  return path;
};

export const completePath: CompletePathType = (pathElement, penCoordinates) => {
  if (pathElement && penCoordinates.x) {
    let points = pathElement.getAttribute('points') || '';
    points += ` ${penCoordinates.x},${penCoordinates.y}`;
    pathElement.setAttribute('points', points);
  }
};