import React from 'react'
import { FootnoteLink } from '../../Footnote/FootnoteLink'

const selectFootnoteLinkStyles = (
  {
    footnoteLinkColor,
    footnoteLinkFontName,
    footnoteLinkFontWeight,
    footnoteLinkLineHeight,
    footnoteLinkFontSize
  },
  footnoteLinks
) => {
  // This is used to apply the proper line height when there is 4 or more footnote links
  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
  const lineHeight =
    footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED
      ? footnoteLinkFontSize * footnoteLinkLineHeight
      : undefined
  return {
    color: footnoteLinkColor,
    fontName: footnoteLinkFontName,
    fontWeight: footnoteLinkFontWeight,
    lineHeight,
    fontSize: footnoteLinkFontSize
  }
}

export const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) =>
  footnoteLinks?.length > 0 ? (
    <FootnoteLink
      tokens={selectFootnoteLinkStyles(themeTokens, footnoteLinks)}
      content={footnoteLinks}
      onClick={onClickFootnote}
    />
  ) : null