// @flow
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import styles from './ListItemText.styles';

type Props = {
  dense: boolean,
  onLayout: (event: any) => void,
  primaryText: string,
  secondaryText: string,
};

const ListItemText = ({ dense, onLayout, primaryText, secondaryText }: Props) => {
  const primaryTextStyle = StyleSheet.flatten([
    styles.primaryText,
    dense && styles.dense,
  ]);
  const secondaryTextStyle = StyleSheet.flatten([
    styles.secondaryText,
    dense && styles.dense,
  ]);

  return (
    <View style={styles.text}>
      <Text style={primaryTextStyle}>{primaryText}</Text>
      {!!secondaryText &&
        <View onLayout={onLayout}>
          <Text style={secondaryTextStyle}>{secondaryText}</Text>
        </View>
      }
    </View>
  );
};

ListItemText.defaultProps = {
  dense: false,
  onLayout: () => {},
  primaryText: '',
  secondaryText: '',
};

export default ListItemText;
