import React from 'react';
import {ListGroup as BListGroup, ListGroupProps as BootstrapListGroupProps} from 'react-bootstrap';

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

const ListGroup = ({action = true, data, value, onChange, flush, ...props}: ListGroupProps) => {

  const handleOnChange = (val: string): React.MouseEventHandler => (e) => {
    if (action && onChange) {
      onChange(val, e);
    }
  }

  return (
    <BListGroup variant={flush ? 'flush' : undefined} {...props}>
      {
        data.map(item => (
          <BListGroup.Item
            key={item.id}
            action={action}
            active={action && item.id === value}
            disabled={item.disabled}
            onClick={handleOnChange(item.id)}
          >
            {item.name}
          </BListGroup.Item>
        ))
      }
    </BListGroup>
  );
};

export default ListGroup;
export {ListGroup, ListGroupProps}