import React, { useEffect, useState } from 'react'

import { Control, Controller, FieldError } from 'react-hook-form'
import { Text } from 'react-native'

import {
  Container,
  Label,
  RadioContainer,
  RadioButtonLabel,
  RadioFill,
  RadioButton,
  Content,
  ErrorMessage,
} from './styles'

interface DataProps {
  label: string
  value: string
}

interface RadioProps {
  label?: string
  control: Control<any>
  name: string
  data: DataProps[]
}

const Radio: React.FC<RadioProps> = ({ control, name, label, data }) => {
  useEffect(() => {}, [])

  return (
    <Container>
      {label && <Label>{label}</Label>}
      <Controller
        name={name}
        control={control}
        render={({ field: { onChange, value }, formState: { errors } }) => (
          <>
            <Content>
              {data.map(item => (
                <RadioContainer
                  key={item.value}
                  onPress={() => onChange(item.value)}
                >
                  <RadioButtonLabel>{item.label}</RadioButtonLabel>
                  <RadioButton>
                    {value && value === item.value && <RadioFill />}
                  </RadioButton>
                </RadioContainer>
              ))}
            </Content>
            {errors[name] && (
              <ErrorMessage>{errors[name].message}</ErrorMessage>
            )}
          </>
        )}
      />
    </Container>
  )
}

export default Radio