import React, { Component, FunctionComponent } from "react";
import PropTypes from "prop-types";
import { Dropdown, DropdownButton, SplitButton } from "react-bootstrap";

class EfeDropdown extends Component<any, any> {
  /* Life Cycle Functions
   * ------------------------------------------------ */

  render() {
    const { children } = this.props;
    return <Dropdown>{children}</Dropdown>;
  }
}

// Sub Components

export const EfeDropdownToggle: FunctionComponent<any> = props => {
  return (
    <Dropdown.Toggle id={props.id} variant="danger" {...props}>
      {props.children}
    </Dropdown.Toggle>
  );
};

export const EfeDropdownMenu: FunctionComponent<any> = props => {
  return <Dropdown.Menu>{props.children}</Dropdown.Menu>;
};

export const EfeDropdownItem: FunctionComponent<any> = props => {
  return <Dropdown.Item>{props.children}</Dropdown.Item>;
};

export const EfeDropdownButton: FunctionComponent<any> = props => {
  return <DropdownButton {...props}>{props.children}</DropdownButton>;
};

export const EfeSplitButton: FunctionComponent<any> = props => {
  return <SplitButton {...props}>{props.children}</SplitButton>;
};

export const EfeDropdownDivider: FunctionComponent<any> = props => {
  return <Dropdown.Divider />;
};

export default EfeDropdown;
