import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet } from 'react-native'
import { Typography } from '../Typography/Typography'
import { selectTokens, getTokensPropType } from '../utils/props/tokens'

export function selectAccentStyles(tokens) {
  return {
    left: tokens.accentOffset,
    top: tokens.accentPadding,
    bottom: tokens.accentPadding,
    backgroundColor: tokens.accentBackgroundColor,
    width: tokens.accentWidth,
    position: 'absolute'
  }
}

/**
 * Content inside an item or control in a SideNav, themed by the SideNavItem theme
 */
export const SideNavItemContent = React.forwardRef(({ children, tokens }, ref) => {
  const typographyTokens = selectTokens('Typography', tokens)

  return (
    <>
      <Typography tokens={typographyTokens} ref={ref}>
        {children}
      </Typography>
      <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
    </>
  )
})

SideNavItemContent.displayName = 'SideNavItemContent'

SideNavItemContent.propTypes = {
  tokens: getTokensPropType('SideNavItem'),
  children: PropTypes.node
}

const staticStyles = StyleSheet.create({
  absolute: {
    position: 'absolute'
  }
})