import map from 'lodash/map';
import noop from 'lodash/noop';
import React from 'react';

export type IListItems<T> = T[];
interface IProps<T> {
  id: string;
  className: string;
  listItems: IListItems<T>;
  selectedRadioIndex: number;
  renderItem: (id: string, item: T | T[], isSelected?: boolean) => React.ReactNode;
  onSelect: (item: T | T[], index: number) => any;
}

export function RadioList<T>(props: IProps<T>) {
  const onSelect = (item: T, index: number) => () => {
    props.onSelect && props.onSelect(item, index);
  };
  return (
    <ul className={`${props.className} unstyled-list`}>
      {map(props.listItems, (item, i) => {
        return <li key={i} className="form-group">
          <input type="radio"
            id={`${props.id}-${i}`}
            checked={props.selectedRadioIndex === i}
            onClick={onSelect(item, i)}
            onKeyPress={onSelect(item, i)}
            onChange={noop}
          />
          {props.renderItem(`${props.id}-${i}`, item, props.selectedRadioIndex === i)}
        </li>;
      })}
    </ul>
  );
}
