import { ReactNode } from 'react';
import { useFormContext, Controller } from 'react-hook-form';

import FormControlLabel from '@material-hu/mui/FormControlLabel';
import Radio, { RadioProps } from '@material-hu/mui/Radio';
import RadioGroup, { RadioGroupProps } from '@material-hu/mui/RadioGroup';

export type FormRadioGroupProps = RadioGroupProps & {
  options: { value: any; label: ReactNode }[];
  radioProps?: RadioProps;
  column?: boolean;
};

function FormRadioGroup({
  name,
  options,
  radioProps,
  column = false,
  ...other
}: FormRadioGroupProps) {
  const { control } = useFormContext();

  return (
    <Controller
      render={({ field }) => (
        <RadioGroup
          {...other}
          {...field}
          sx={{ flexDirection: column ? 'column' : 'row', ...other?.sx }}
        >
          {options.map(option => (
            <FormControlLabel
              control={
                <Radio
                  {...radioProps}
                  sx={{ ml: 1, ...radioProps?.sx }}
                />
              }
              key={option.value}
              label={option.label}
              value={option.value}
            />
          ))}
        </RadioGroup>
      )}
      name={name}
      control={control}
    />
  );
}

export default FormRadioGroup;