import { RadioButton, Subheading, TouchableRipple } from 'react-native-paper'
import * as React from 'react'
import { View } from 'react-native'
import { FieldProps } from 'formik'

interface IProps extends FieldProps {
  label: string
  id: string
}


export const InputRadio: React.FunctionComponent<IProps> = (props) => {
  const {
    field,
    label,
    form,
    id,
  } = props
  const {
    setFieldValue,
  } = form
  const {
    name,
    value,
  } = field
  return (
    <>

      <TouchableRipple
        onPress={() => setFieldValue(name, id)}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <RadioButton
            value={id}
            status={id === value ? 'checked' : 'unchecked'}
            onPress={() => setFieldValue(name, id)}
          />
          <Subheading>{label}</Subheading>
        </View>
      </TouchableRipple>
    </>
  )
}