const MAX_AVAILABLE_WIDTH = pieWidth - MARGIN;
const START_FONT_SIZE = 25;
const MIN_FONT_SIZE = 8;

function renderWrappedTitle(svg: any, titleText: string) {
  let fontSize = START_FONT_SIZE;
  let wrapped = wrapLabel(titleText, MAX_AVAILABLE_WIDTH, {
    fontSize,
    fontFamily: 'Arial',
    fontWeight: 400,
    joinWith: '<br/>',
  });

  // measure once per fontSize change
  let tempTitle = svg.append('text')
    .attr('x', pieWidth / 2)
    .attr('y', 30)
    .attr('class', 'pieTitleText')
    .style('text-anchor', 'middle')
    .style('white-space', 'pre-line')
    .style('font-size', fontSize + 'px');

  while (tempTitle.node()?.getBBox().width > MAX_AVAILABLE_WIDTH && fontSize > MIN_FONT_SIZE) {
    tempTitle.remove();
    fontSize -= 1;
    wrapped = wrapLabel(titleText, MAX_AVAILABLE_WIDTH, {
      fontSize,
      fontFamily: 'Arial',
      fontWeight: 400,
      joinWith: '<br/>',
    });

    tempTitle = svg.append('text')
      .attr('x', pieWidth / 2)
      .attr('y', 30)
      .attr('class', 'pieTitleText')
      .style('text-anchor', 'middle')
      .style('white-space', 'pre-line')
      .style('font-size', `${fontSize}px`);
  }

  const lines = wrapped.split('<br/>');
  lines.forEach((line, idx) => {
    tempTitle.append('tspan')
      .attr('x', pieWidth / 2)
      .attr('dy', idx === 0 ? 0 : '1.2em')
      .text(line);
  });

  return tempTitle;
}