import React from 'react';
import { Dropdown as BDropdown } from 'react-bootstrap';

const { Toggle, Menu, Item } = BDropdown;

interface DropdownsProps {
  data: Array<{
    id: string,
    name: string,
    href?: string,
    disabled?: boolean
  }>,
  value: string,
  defaultText: string,
  onChange: (value: string, event: any) => void,
  maxHeight: number | string,
  variant?: string,
  toggleValue?: string,
}

const Dropdowns = ({ data=[], defaultText="Select...", value='', toggleValue='', onChange=()=>{}, maxHeight=300, variant, ...props } : DropdownsProps) => {

  const handleOnChange = (val: string) => (e: any) => {
    onChange(val, e);
  }

  const selectedItem = data.find((item: any) => item.id === value);
  const title = selectedItem ? selectedItem.name : '';

  return (
    <BDropdown {...props} >
      <Toggle variant={variant} value={toggleValue}>
        {title || defaultText}
      </Toggle>
      <Menu style={{ overflowY: 'auto', maxHeight }}>
        {
          data.map(item => (
            <Item
              key={item.id}
              href={item.href}
              id={item.id}
              active={item.id === value}
              onClick={handleOnChange(item.id)}
            >
              {item.name}
            </Item>
          ))
        }
      </Menu>
    </BDropdown>
  );
};

export default Dropdowns;
export {Dropdowns, DropdownsProps}