const paddingKeys = ['left', 'right', 'top', 'bottom'] as const;

/** Normalize padding argument to object. */
const normalizePadding = (arg: undefined | number | Record<typeof paddingKeys[number], number | undefined>) => {
  if (typeof arg === 'undefined') {
    return paddingKeys.reduce((p, key) => ({ ...p, [key]: 0 }), {});
  }

  if (typeof arg === 'number') {
    return paddingKeys.reduce((p, key) => ({ ...p, [key]: arg }), {});
  }

  return paddingKeys.reduce((p, key) => ({
    ...p,
    [key]: arg[key] || 0
  }), {})
};

/** Get total area reserved for legend icon */
const getLegendIconDimensions = (i) => {
  const padding = normalizePadding(i.padding);
  const paddingX = padding.left + padding.right;
  const paddingY = padding.top + padding.bottom;

  if (i.type === "square") {
    return {
      width: legendIcon.width + paddingX,
      height: legendIcon.height + paddingY.
    }
  }

  if (i.type === "circle") {
    const diameter = i.radius * 2;

    return {
      width: diameter + paddingX,
      height: diameter + paddingY,
    }
  }

  // HTML element with explicit height & width
  if (i.type instanceof Element && i.height && i.width) {
    return {
      width: i.width + paddingX,
      height: i.height + paddingY,
    }
  }

  // HTML element with unknown height and/or width
  if (i.type instanceof Element) {
    const elem = document.createElement('div');
    elem.style.visibility = "hidden";
    elem.appendChild(i.type)

    // Temporarily render element (hidden) to get dimensions
    document.body.appendChild(elem)
    const width = i.type.offsetWidth;
    const height = i.type.offsetHeight;
    document.body.removeChild(elem)

    return { width, height }
  }

  // ...
}