import React from 'react';
import { ToggleButtonGroup as BToggleButtonGroup, ToggleButton } from 'react-bootstrap';

type ToggleButtonRadioProps = {
  type: 'radio',
  options: Array<{
    [key: string]: string | JSX.Element
  }>,
  value: string,
  onChange: (value: string, event: any) => void,
  name?: string,
  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link',
  labelKey?: string,
  valueKey?: string,
}

type ToggleButtonCheckboxProps = {
  type: 'checkbox',
  options: Array<{
    [key: string]: string | JSX.Element
  }>,
  value: Array<any>,
  onChange: (value: Array<any>) => void,
  name?: string,
  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link',
  labelKey?: string,
  valueKey?: string,
}

type ToggleButtonGroupProps = ToggleButtonRadioProps | ToggleButtonCheckboxProps;


const ToggleButtonGroup = ({
  options,
  type = 'radio',
  name='toggle-button-group',
  value='',
  onChange=()=>{},
  variant='primary',
  labelKey='name',
  valueKey='value',
  ...props
}: ToggleButtonGroupProps) => {
  const optionsEls = options.map((radio) => {
    const optId = radio[valueKey];
    return (
        <ToggleButton
          key={optId as string}
          id={`option-${optId}`}
          type={type}
          variant={`outline-${variant}`}
          name="option-name"
          value={optId as string}
        >
          {radio[labelKey]}
        </ToggleButton>
    );
  }) 
  return (
    type === 'radio' ? 
    <BToggleButtonGroup type='radio' name={name} value={value} onChange={onChange} {...props}>
      {optionsEls}
    </BToggleButtonGroup>
    :
    <BToggleButtonGroup type='checkbox' name={name} value={value as ToggleButtonCheckboxProps['value']} onChange={onChange as ToggleButtonCheckboxProps['onChange']} {...props}>
      {optionsEls}
    </BToggleButtonGroup>
  );
};


export default ToggleButtonGroup;
export {ToggleButtonGroup, ToggleButtonGroupProps}