import * as React from 'react';
import { IInputGroup } from '../../Interfaces/IInputGroup';

interface IRadioGroupButtonsProps {
  name: string
  value?: string
  defaultValue?: string
  labelText: string
  inputGroups: IInputGroup[]
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
}

export const RadioGroupButtons: React.FunctionComponent<IRadioGroupButtonsProps> = (props) => {
  let inputGroups;
  if (props.value !== undefined) {
    inputGroups = props.inputGroups.map((inputGroup) => (
      <label key={inputGroup.value}>
        <input
          type='radio'
          name={props.name}
          className='m-2'
          value={inputGroup.value}
          checked={props.value === inputGroup.value}
          onChange={props.onChange}
        />
        {inputGroup.text}
      </label>
    ));
  } else {
    inputGroups = props.inputGroups.map((inputGroup) => (
      <label key={inputGroup.value}>
        <input
          type='radio'
          name={props.name}
          className='m-2'
          value={inputGroup.value}
          defaultChecked={props.defaultValue === inputGroup.value}
          onChange={props.onChange}
        />
        {inputGroup.text}
      </label>
    ));
  }

  return (
    <>
      <label>
        {props.labelText}
      </label>
      <div id='XPositionReference'
        className='flex flex-col'
      >
        { inputGroups }
      </div>
    </>
  );
};