import React from 'react'
import PropTypes from 'prop-types'
import { View } from 'react-native'

import { selectSystemProps } from '../utils/props/selectSystemProps'
import { a11yProps } from '../utils/props/a11yProps'
import { viewProps } from '../utils/props/viewProps'

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

// No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
// If a11y testing finds any additional handling is needed at the container level, add it here.
export const FieldsetContainer = React.forwardRef(
  ({ children, accessibilityRole, style, ...rest }, ref) => (
    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)} style={style}>
      {children}
    </View>
  )
)
FieldsetContainer.displayName = 'FieldsetContainer'

FieldsetContainer.propTypes = {
  ...selectedSystemPropTypes,
  children: PropTypes.node,
  accessibilityRole: PropTypes.string,
  style: PropTypes.object
}