import React from 'react'
import { View, Text, StyleSheet, TouchableWithoutFeedback, StyleProp, ViewStyle } from 'react-native';
import Icon from '../Icon'

type Props = {
  value?: string,
  label?: string,
  checked?: boolean,
  onPress?: (value: string) => void,
  onChange?: (value: boolean) => void,
  disabled?: boolean,
  activeIcon?: React.ReactElement<{}>,
  inactiveIcon?: React.ReactElement<{}>,
  rightIcon?: boolean,
  checkedColor?: string,
  style?: StyleProp<ViewStyle>;
  children?: any,
  iconSize?: number
}
const Checkbox = ({
  onPress,
  onChange,
  disabled,
  activeIcon,
  inactiveIcon,
  rightIcon,
  checkedColor = "#2376b7",
  iconSize = 20,
  ...rest }: Props) => {
  return (
    <TouchableWithoutFeedback
      disabled={disabled}
      testID="Radio"
      onPress={onPress && (() => onPress(rest.value || ''))
        || onChange && (() => onChange(!rest.checked))}>
      <View style={[styles.radio, disabled && styles.disabled, rest.style]}>
        {rightIcon && <Text style={styles.ml4}>{rest.children || rest.label}</Text>}
        <View>
          {!rest.checked ?
            (inactiveIcon ? inactiveIcon : <Text style={[styles.checkBox, { width: iconSize, height: iconSize, borderRadius: iconSize / 2 }]}></Text>)
            :
            (activeIcon ? activeIcon : <Text style={{ width: iconSize, height: iconSize }}><Icon name="checkcircle" size={iconSize} color={checkedColor}></Icon></Text>)}
        </View>
        {!rightIcon && <Text style={styles.ml4}>{rest.children || rest.label}</Text>}
      </View>
    </TouchableWithoutFeedback>
  )
}
const styles = StyleSheet.create({
  radio: {
    flexDirection: 'row',
    alignItems: 'center',
    minWidth: 80,
    paddingBottom: 8,
  },
  checkBox: {
    borderWidth: 2,
    borderColor: '#333',
    overflow: 'hidden',
  },
  disabled: {
    opacity: 0.5,
  },
  ml4: {
    marginLeft: 4,
  }
})
export default Checkbox