// @flow
import React, { cloneElement } from 'react';
import type { Node } from 'react';
import { StyleSheet, View } from 'react-native';
import Children from 'react-children-utilities';
import styles from './List.styles';

type Props = {
  children: Node,
  dense: boolean,
};

const List = ({ children, dense }: Props) => {
  const style = StyleSheet.flatten([
    styles.list,
    dense && styles.dense,
  ]);

  const items = Children.map(
    Children.filter(children, child => child.type.name === 'ListItem'),
    child => cloneElement(child, { dense }),
  );


  return <View style={style} accessibilityRole="list">{items}</View>;
};

List.defaultProps = {
  children: null,
  dense: false,
};

export default List;
