const ARROW_HEAD_HEIGHT = 600;
const ARROW_HEAD_WIDTH = 1600;

// eslint-disable-next-line
const ARROW_HEAD = `<path d="M0 0  L${ARROW_HEAD_WIDTH / 2} -${ARROW_HEAD_HEIGHT}  L${ARROW_HEAD_WIDTH / 2} 0  L0 ${ARROW_HEAD_HEIGHT}  L-${ARROW_HEAD_WIDTH / 2} 0 L-${ARROW_HEAD_WIDTH / 2} -${ARROW_HEAD_HEIGHT}z" fill="#ff005c" />`;

export const buildArrowByCoordinates = ({ arrowCoordinates }) => {
  const pathD = arrowCoordinates
    .map(({ x, y }, index) => {
      if (index === 0) {
        return `M${x} ${y}`;
      }
      return `L${x} ${y}`;
    })
    .join(' ');

  const beforeLastPoint = arrowCoordinates.at(-2);
  const lastPoint = arrowCoordinates.at(-1);
  const angle = Math.atan2(lastPoint.y - beforeLastPoint.y, lastPoint.x - beforeLastPoint.x) * (180 / Math.PI);

  return `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8192 8192">
  <style></style>
  <path stroke="#ff005c" stroke-width="500" fill="none" d="${pathD}" />
  <g style="translate: ${lastPoint.x}px ${lastPoint.y}px; rotate: calc(270deg + ${angle}deg)">${ARROW_HEAD}</g>
</svg>
`;
};
