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);
  }
};