const DividerMenuItem = () => <div className="dropdown-divider" />;

const DropDownMenuItem = props => (
  <a className="dropdown-item" href={props.link}>
    {props.displayText}
  </a>
);

const DropDownMenu = props => {
  return (
    <div className="dropdown-menu">
      {props.menuItems.map((menuItem, index) => {
        if (menuItem.displayText || menuItem.link) {
          return (
            <DropDownMenuItem
              key={index}
              link={menuItem.link}
              displayText={menuItem.displayText}
            />
          );
        } else {
          return <DividerMenuItem key={index} />;
        }
      })}
    </div>
  );
};

const DropDown = props => {
  return (
    <div className="btn-group">
      {props.splitButton && (
        <button type="button" className={`btn ${props.buttonStyle}`}>
          {props.displayText}
        </button>
      )}

      {props.splitButton ? (
        <button
          type="button"
          className={`btn ${
            props.buttonStyle
          } dropdown-toggle dropdown-toggle-split`}
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <span className="sr-only">Toggle Dropdown</span>
        </button>
      ) : (
        <button
          type="button"
          className={`btn ${props.buttonStyle} dropdown-toggle`}
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          {props.displayText}
        </button>
      )}
      <DropDownMenu menuItems={props.menuItems} />
    </div>
  );
};

const menuItems = [
  { displayText: "HTML", link: "#" },
  { displayText: "CSS action", link: "#" },
  { displayText: "Javascript", link: "#" },
  {},
  { displayText: "Java", link: "#" },
  { displayText: "C++", link: "#" },
  { displayText: "C#.NET", link: "#" },
  {},
  { displayText: "Oracle", link: "#" },
  { displayText: "SQL Server", link: "#" },
  { displayText: "MySQL", link: "#" }
];

const buttonStyles = [
  "btn-primary",
  "btn-secondary",
  "btn-success",
  "btn-danger",
  "btn-warning",
  "btn-info",
  "btn-light",
  "btn-dark",
  "btn-link"
];

const Buttons = props => (
  <div className="btn-group-vertical">
    {props.buttonStyles.map((buttonStyle, index) => (
        <DropDown
          key={index} 
          buttonStyle={buttonStyle} 
          splitButton={index % 2 == 0} 
          displayText="Technologies" 
          menuItems={menuItems}
        />
    ))}
  </div>
);

ReactDOM.render(
  <div className="mb-2">
    <DropDown
      buttonStyle="btn-danger"
      splitButton={false}
      displayText="Technologies"
      menuItems={menuItems}
    />
  </div>,
  document.getElementById("app")
);

ReactDOM.render(
  <Buttons buttonStyles={buttonStyles} />,
  document.getElementById("app2")
);