import type { ParsedInfographicOptions } from '../../options';
import { createElement, getElementByRole } from '../../utils';
import { ElementTypeEnum } from '../constants';

export function renderBackground(
  svg: SVGSVGElement,
  options: ParsedInfographicOptions,
): void {
  if (options.svg?.background === false) return;
  const {
    themeConfig: { colorBg: background },
  } = options;
  if (!background) return;
  const container = svg.parentElement;

  if (container) container.style.backgroundColor = background || 'none';
  const element = getElementByRole(svg, ElementTypeEnum.Background);

  svg.style.backgroundColor = background;

  if (element) {
    element.setAttribute('fill', background);
  } else if (svg.viewBox?.baseVal) {
    const { x, y, width, height } = svg.viewBox.baseVal;

    const rect = createElement('rect', {
      x,
      y,
      width,
      height,
      fill: background,
      'data-element-type': ElementTypeEnum.Background,
    });
    svg.prepend(rect);
  }
}