import React from 'react';
import { StyleSheet } from 'react-native';
import CheckBoxBase from '@react-native-community/checkbox';

const CheckBox = ({
  value=false,
  disabled=false,
  onValueChange,
  tintColor=colorAccent,
  iosSize=24
}) => {
  if (isIOS) {
    return (
      <MaterialIcons
        name={value ? "check-box" : "check-box-outline-blank"}
        size={iosSize}
        color={value ? tintColor : '#777'}
        style={styles.checkBoxView}
        onPress={() => {
          if (onValueChange)
            onValueChange(!value)
        }}
      />
    );
  } else {
    return (
      <CheckBoxBase
        value={value}
        disabled={disabled}
        tintColors={{true: tintColor, false: '#777'}}
        onValueChange={onValueChange}
      />
    )
  }
}

const styles = StyleSheet.create({
  checkBoxView: {
    padding: 4
  }
})

export default CheckBox;