import { Box, BoxProps, RadioGroupProps } from '@mui/material'
import { ReactNode } from 'react'
import { Controller } from 'react-hook-form'
import { RadioGroup } from '../Input'

interface Props extends RadioGroupProps {
  label?: ReactNode
  name: string
  control: any
  sx?: any
  row?: boolean
  required?: boolean
  disabled?: boolean
  options: { value: any; label: string | ReactNode; disabled?: boolean }[]
  containerProps?: BoxProps
}

export default function FormRadioGroup({
  name,
  control,
  label,
  options = [],
  row = false,
  containerProps,
  disabled = false,
  ...rest
}: Props) {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
        <Box width="100%" {...containerProps}>
          <RadioGroup
            row={row}
            name={name}
            label={label}
            options={options}
            value={field.value}
            onChange={field.onChange}
            disabled={disabled}
            error={error ? true : false}
            helperText={error ? error?.message : null}
            {...rest}
          />
        </Box>
      )}
    />
  )
}
