import React from 'react'
import { View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
import { Typography } from '../Typography/Typography'
import { htmlAttrs } from '../utils/htmlAttrs'
import { selectSystemProps } from '../utils/props/selectSystemProps'
import { getTokensPropType } from '../utils/props/tokens'
import { variantProp } from '../utils/props/variantProp'
import { viewProps } from '../utils/props/viewProps'

const fontSizeMapping = {
  12: 'micro',
  14: 'small',
  16: 'h6'
}

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])

const selectContainerBackground = ({ backgroundColor }) => ({ backgroundColor })

const selectContainerBorder = ({ borderWidth, borderColor, borderRadius }) => ({
  borderWidth,
  borderColor,
  borderRadius
})

const selectContainerPadding = ({ paddingTop, paddingRight, paddingBottom, paddingLeft }) => ({
  paddingTop,
  paddingRight,
  paddingBottom,
  paddingLeft
})

const getTypographyTokens = ({ fontName, fontWeight, color }) => ({ fontName, fontWeight, color })

const getTypographyVariant = ({ fontSize }) => ({ size: fontSizeMapping[fontSize] })

export const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
  const themeTokens = useThemeTokens('Badge', tokens, variant)

  return (
    <View
      ref={ref}
      style={[
        staticStyles.container,
        selectContainerBackground(themeTokens),
        selectContainerBorder(themeTokens),
        selectContainerPadding(themeTokens)
      ]}
      {...selectProps(rest)}
    >
      <Typography
        tokens={getTypographyTokens(themeTokens)}
        variant={getTypographyVariant(themeTokens)}
      >
        {children}
      </Typography>
    </View>
  )
})

Badge.propTypes = {
  ...selectedSystemPropTypes,
  /**
   * Content rendered inside the badge.
   */
  children: PropTypes.node,
  tokens: getTokensPropType('Badge'),
  variant: variantProp.propType
}

Badge.displayName = 'Badge'

const staticStyles = StyleSheet.create({
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignSelf: 'flex-start'
  }
})