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

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

export function RadioGroupButtons(props: IRadioGroupButtonsProps): JSX.Element {
  let inputGroups;
  if (props.value !== undefined) {
    // dynamic
    inputGroups = props.inputGroups.map((inputGroup) => (
      <div key={inputGroup.value}>
        <input
          id={inputGroup.value}
          type='radio'
          name={props.name}
          className={`peer m-2 ${props.inputClassName}`}
          value={inputGroup.value}
          checked={props.value === inputGroup.value}
          onChange={props.onChange} />
        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
          {inputGroup.text}
        </label>
      </div>

    ));
  } else {
    // static
    inputGroups = props.inputGroups.map((inputGroup) => (
      <div key={inputGroup.value}>
        <input
          id={inputGroup.value}
          type='radio'
          name={props.name}
          className={`peer m-2 ${props.inputClassName}`}
          value={inputGroup.value}
          defaultChecked={props.defaultValue === inputGroup.value} />
        <label htmlFor={inputGroup.value} className='text-gray-400 peer-checked:text-blue-500'>
          {inputGroup.text}
        </label>
      </div>
    ));
  }

  return (
    <>
      <label className='mt-4 text-xs font-medium text-gray-800'>
        {props.labelText}
      </label>
      <div id='XPositionReference'
        className='flex flex-col'
      >
        {inputGroups}
      </div>
    </>
  );
}