import React from 'react'
import { StyleSheet, View, Text, Platform } from 'react-native'
import { renderTypography } from './renderTypography'
import { renderFootnoteLinks } from './renderFootnoteLinks'

const selectFootnoteContainer = ({ footnoteMarginTop }) => ({
  marginTop: footnoteMarginTop
})

const selectFootnoteBottomTextContainer = ({ bottomTextMarginTop }) => ({
  marginTop: bottomTextMarginTop
})

const selectFootnoteLinksStyles = ({ bottomLinksMarginLeft }) => ({
  marginLeft: bottomLinksMarginLeft
})

export const renderFootnoteContent = (
  footnoteMarginTop,
  bottomTextMarginTop,
  bottomText,
  bottomTextTypographyTokens,
  fontColor,
  footnoteLinks,
  bottomLinksMarginLeft,
  onClickFootnote,
  themeTokens
) => {
  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
  return (
    <>
      <View
        style={[staticStyles.footnoteContainer, selectFootnoteContainer({ footnoteMarginTop })]}
      >
        <Text style={selectFootnoteBottomTextContainer({ bottomTextMarginTop })}>
          {renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor)}{' '}
        </Text>
        {footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
          <View
            style={[
              staticStyles.footnoteLinkContainer,
              selectFootnoteLinksStyles({ bottomLinksMarginLeft })
            ]}
          >
            {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
          </View>
        ) : null}
      </View>
      {footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
        <View style={staticStyles.verticalFootnoteLinkContainer}>
          {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
        </View>
      ) : null}
    </>
  )
}

const staticStyles = StyleSheet.create({
  footnoteContainer: {
    flexDirection: 'row'
  },
  footnoteLinkContainer: {
    flexDirection: 'row',
    ...Platform.select({
      ios: { alignSelf: 'flex-end', top: 2 },
      android: { alignSelf: 'center', top: -8 }
    })
  },
  verticalFootnoteLinkContainer: {
    ...Platform.select({
      ios: { top: 10 },
      android: { top: -2 }
    })
  }
})