import { Fragment } from "react";

// A name ending in digits, such as w1 or x_1, with or without a bar or dot; not a number like 2 or 1e5
const SUBSCRIPTED_NAME = /(?<![A-Za-z0-9_.]|̄|̇)([A-Za-z](?:̄|̇)?[A-Za-z_]*)(\d+)(?![A-Za-z0-9_])/g;

// In SVG, a subscript's size, and how far it drops in the surrounding text's ems
const SVG_SIZE = 0.75;
const SVG_DROP = 0.3;

// Text with the digits of names drawn as subscripts. Use svg inside an SVG <text>.
export default function MathText({ text, svg = false }: { text: string; svg?: boolean }) {
  const parts = text.split(SUBSCRIPTED_NAME);
  // split gives [before, name, digits, before, name, digits, ..., after]
  return parts.map((part, i) => {
    if (i % 3 !== 2) {
      // x_1 is drawn as x with a subscript, without its underscore
      const shown = i % 3 === 1 ? part.replace(/_$/, "") : part;
      const afterSubscript = svg && i % 3 === 0 && i > 0;
      return afterSubscript ? (
        <tspan key={i} dy={`${-SVG_DROP}em`}>
          {shown}
        </tspan>
      ) : (
        <Fragment key={i}>{shown}</Fragment>
      );
    }
    return svg ? (
      <tspan key={i} dy={`${SVG_DROP / SVG_SIZE}em`} fontSize={`${SVG_SIZE * 100}%`}>
        {part}
      </tspan>
    ) : (
      <sub key={i}>{part}</sub>
    );
  });
}