// export function createTooltipPath(angleInRad: number, width: number, height: number, br = 8) {
//   const lw = width - 2 * br;
//   const lh = height - 2 * br;
//   let topLine = `l ${lw} 0`;
//   let bottomLine = `l -${lw} 0`;
//   let rightLine = `l 0 ${lh}`;
//   let leftLine = `l 0 -${lh}`;
//   const topRightCorner = `c ${br} 0 ${br} ${br} ${br} ${br}`;
//   const bottomRightCorner = `c 0 ${br} -${br} ${br} -${br} ${br}`;
//   const bottomLeftCorner = `c -${br} 0 -${br} -${br} -${br} -${br}`;
//   const topLeftCorner = `c 0 -${br} ${br} -${br} ${br} -${br}`;

//   // let angle = (Math.atan2(pointAt[1], pointAt[0]) * 180) / Math.PI;
//   let angle = angleInRad * (180 / Math.PI);
//   if (angle < 0) angle = 360 + angle;
//   angle = (angle + 45) % 360;
//   const a = 8;
//   const percent = (Math.abs(angle) % 90) / 90;
//   const verticalCP = a + (lh - a * 2) * percent;
//   const verticalTop = verticalCP;
//   const verticalBottom = lh - verticalCP;
//   const horizontalCP = a + (lw - a * 2) * percent;
//   const horizontalTop = horizontalCP;
//   const horizontalBottom = lw - horizontalCP;

//   if (angle > 0 && angle < 90) {
//     // Arrow on right line

//     rightLine = `l 0 ${verticalTop - a} l ${a} ${a} l -${a} ${a} l 0 ${verticalBottom - a}`;
//   } else if (angle >= 90 && angle < 180) {
//     // Arrow on bottom line

//     bottomLine = `l -${horizontalTop - a} 0 l -${a} ${a} l -${a} -${a} l -${
//       horizontalBottom - a
//     } 0`;
//   } else if (angle >= 180 && angle < 270) {
//     // Arrow on left line
//     leftLine = `l 0 -${verticalTop - a} l -${a} -${a} l ${a} -${a} l 0 -${verticalBottom - a}`;
//   } else {
//     // Arrow on top line
//     topLine = `l ${horizontalTop - a} 0 l ${a} -${a} l ${a} ${a} l ${horizontalBottom - a} 0`;
//   }

//   return `M ${br} 0 ${topLine} ${topRightCorner} ${rightLine} ${bottomRightCorner} ${bottomLine} ${bottomLeftCorner} ${leftLine} ${topLeftCorner}`;
// }

export function createTooltipPath(
  pointDir: 'up' | 'down' | 'left' | 'right',
  offset: number,
  width: number,
  height: number,
  br = 8,
) {
  const lw = width - 2 * br;
  const lh = height - 2 * br;
  let topLine = `l ${lw} 0`;
  let bottomLine = `l -${lw} 0`;
  let rightLine = `l 0 ${lh}`;
  let leftLine = `l 0 -${lh}`;
  const topRightCorner = `c ${br} 0 ${br} ${br} ${br} ${br}`;
  const bottomRightCorner = `c 0 ${br} -${br} ${br} -${br} ${br}`;
  const bottomLeftCorner = `c -${br} 0 -${br} -${br} -${br} -${br}`;
  const topLeftCorner = `c 0 -${br} ${br} -${br} ${br} -${br}`;

  if (pointDir === 'left' || pointDir === 'down') offset = 1 - offset;

  const a = 8;
  const verticalCP = a + (lh - a * 2) * offset;
  const verticalTop = verticalCP;
  const verticalBottom = lh - verticalCP;
  const horizontalCP = a + (lw - a * 2) * offset;
  const horizontalTop = horizontalCP;
  const horizontalBottom = lw - horizontalCP;

  if (pointDir === 'right') {
    // Arrow on right line
    rightLine = `l 0 ${verticalTop - a} l ${a} ${a} l -${a} ${a} l 0 ${verticalBottom - a}`;
  } else if (pointDir === 'down') {
    // Arrow on bottom line

    bottomLine = `l -${horizontalTop - a} 0 l -${a} ${a} l -${a} -${a} l -${
      horizontalBottom - a
    } 0`;
  } else if (pointDir === 'left') {
    // Arrow on left line
    leftLine = `l 0 -${verticalTop - a} l -${a} -${a} l ${a} -${a} l 0 -${verticalBottom - a}`;
  } else {
    // Arrow on top line
    topLine = `l ${horizontalTop - a} 0 l ${a} -${a} l ${a} ${a} l ${horizontalBottom - a} 0`;
  }

  return `M ${br} 0 ${topLine} ${topRightCorner} ${rightLine} ${bottomRightCorner} ${bottomLine} ${bottomLeftCorner} ${leftLine} ${topLeftCorner}`;
}