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

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


export const InputSwitch: FunctionComponent<IProps> = (props) => {
  const {
    field,
    label,
    form,
  } = props
  const {
    touched,
    errors,
    setFieldValue,
  } = form
  const {
    name,
    value,
  } = field
  return (
    <>

      <TouchableRipple
        onPress={() => setFieldValue(name, !value)}>
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Subheading>{label}</Subheading>
          <Switch
            value={field.value}
            onValueChange={() => setFieldValue(name, !value)}
          />
        </View>
      </TouchableRipple>

      <HelperText type="error" visible={!!touched[name]}>
        {errors[name]}
      </HelperText>
    </>
  )
}