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

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

type Props = RadioGroupProps & {
  options: { value: any; label: string }[];
  radioProps?: RadioProps;
  rules?: any;
  defaultValue?: string;
  disabled?: boolean;
  onChangeSkipStep?: (param) => void;
  indexAsValue?: boolean;
  valueAsNumber?: boolean;
};

/**
 * @deprecated This component does not implement Hugo's design system.
 */
function FormRadioGroup({
  name,
  options,
  radioProps,
  rules,
  defaultValue,
  disabled,
  onChangeSkipStep = () => null,
  indexAsValue = false,
  valueAsNumber,
  ...other
}: Props) {
  const { control } = useFormContext();

  return (
    <Controller
      rules={rules}
      name={name}
      control={control}
      defaultValue={defaultValue}
      render={({ field: { onChange, ...field } }) => (
        <RadioGroup
          {...other}
          {...field}
          onChange={(event, value) => {
            onChange(valueAsNumber ? Number(value) : value);
            onChangeSkipStep(event);
          }}
        >
          {options.map((option, index) => (
            <FormControlLabel
              disabled={disabled}
              key={option.value}
              control={
                <Radio
                  sx={{ ml: 1 }}
                  {...radioProps}
                />
              }
              label={option.label}
              value={indexAsValue ? index : option.value}
            />
          ))}
        </RadioGroup>
      )}
    />
  );
}

export default FormRadioGroup;