import React from 'react';
import {Form, FormCheckProps} from 'react-bootstrap';

interface RadioGroupProps extends Omit<FormCheckProps, "onChange"> {
  data: { id: string; name: string; disabled?: boolean }[],
  value: string,
  onChange?: (value: string, event: any) => void,
}

let RadioGroup = ({data, value, onChange, name = "checkbox-group-name", inline = true, ...props}: RadioGroupProps) => {
  const handleOnCLick = (id: string): React.ChangeEventHandler<HTMLInputElement> => (e) => {
    onChange && onChange(id, e);
  }

  return (
    <div className="mb-3">
      {
        data.map(item => (
          <Form.Check
            key={item.id}
            id={item.id}
            label={item.name}
            inline={inline}
            name={name}
            disabled={item.disabled}
            checked={value === item.id}
            type="radio"
            onChange={handleOnCLick(item.id)}
            {...props}
          />
        ))
      }
    </div>
  );
};

export default RadioGroup;
export {RadioGroup, RadioGroupProps};