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

export const pointCalc = (
  _points: PointType[][],
  h: number,
  s: number,
): PointType[][] => {
  const reducer = _points.reduce(
    (acc: PointType[][], cur: PointType[]): PointType[][] => {
      const p = cur.map((point: PointType) => ({
        x: point.x * s,
        y: h - point.y * s,
      }));
      acc.push(p);
      return acc;
    },
    [],
  );

  return reducer;
};

export const rectCalcWithPoint = (
  pointsGroup: PointType[][],
  borderWidth: number,
): HTMLCoordinateType => {
  const xArray: number[] = [];
  const yArray: number[] = [];

  pointsGroup[0].forEach((point: PointType) => {
    xArray.push(point.x);
    yArray.push(point.y);
  });

  const top = Math.min(...yArray);
  const left = Math.min(...xArray);
  const bottom = Math.max(...yArray);
  const right = Math.max(...xArray);
  return {
    top,
    left,
    width: right - left + borderWidth,
    height: bottom - top + borderWidth,
  };
};

export const calcViewBox = (
  { top, left, width, height }: HTMLCoordinateType,
  borderWidth: number,
): string => {
  const distance = borderWidth / 2;
  return `
  ${left - distance} ${top - distance} ${width + distance} ${height + distance}
`;
};