import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import CheckBox from '../components/CheckBox';
import TextView from './TextView';

const CheckBoxText = (
  {
    value=false,
    text='',
    disabled=false,
    onValueChange,
    flexText=false,
    style=styles.checkboxItem,
    textStyle=styles.checkboxText
  }
) => (
  <View style={style}>
    <CheckBox
      value={value}
      disabled={disabled}
      onValueChange={onValueChange}/>
    <TextView
      style={[textStyle, flexText ? {flex: 1} : {}]}
      onPress={() => {
        if (onValueChange) onValueChange(!value)
      }}>{text}</TextView>
  </View>
)

export default CheckBoxText;

const styles = StyleSheet.create({
  checkboxItem: {
    flex: 1,
    minWidth: 100,
    paddingTop: 2,
    paddingBottom: 4,
    alignItems: 'center',
    flexDirection: 'row'
  },
  checkboxText: {
    color: '#222',
    fontSize: 16,
    paddingLeft: 4
  }
})