/**
 * 1文字ずつ分解しカーニングも考慮した幅でspanタグを挿入します。
 * @param {HTMLElement} element
 * @param {string} className
 * @param {boolean} addIndex
 */
export const splitTextWithKerning = async (
  element,
  className = "",
  addIndex = false,
) => {
  const { fontStyle, fontWeight, fontSize, lineHeight, fontFamily } =
    getComputedStyle(element);
  const text = element.textContent.trim();

  // キャンバスを作成
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  const fontStyleValue = `${fontStyle} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;

  // フォントのロードを待つ
  await document.fonts.load(fontStyleValue);

  // フォント設定を適用
  context.font = fontStyleValue;

  // 各文字の幅を計算
  const widths = [];
  for (let i = 0; i < text.length; i++) {
    const currentChar = text[i];
    const nextChar = text[i + 1] || "";

    // 現在の文字単体の幅
    const singleWidth = context.measureText(currentChar).width;
    // 現在の文字 + 次の文字ペアの幅
    const pairWidth = nextChar
      ? context.measureText(currentChar + nextChar).width
      : singleWidth;
    // カーニングが考慮された幅（次の文字とのペアから次の文字単体を引く）
    const kernedWidth = nextChar
      ? pairWidth - context.measureText(nextChar).width
      : singleWidth;

    widths.push(kernedWidth);
  }

  // 1文字ずつspanタグで区切って、幅を挿入する。index付与フラグがある場合はつける
  const insertHtml = [...text]
    .map(
      (char, index) =>
        `<span style="display:inline-block;width:${widths[index]}px;${addIndex ? "--index:" + index : ""}" ${className ? 'class="' + className + '"' : ""}>${char}</span>`,
    )
    .join("");

  // 要素に挿入
  element.textContent = "";
  element.insertAdjacentHTML("afterbegin", insertHtml);
};