class DividerMenuItem extends React.Component {
  render = () => <div className="dropdown-divider" />;
}

class DropDownHeader extends React.Component{
  render = () => <h6 className="dropdown-header">{this.props.displayText}</h6>;
}

class DropDownMenuItem extends React.Component {
  render = () => (
    <a className="dropdown-item" href={this.props.link}>
      {this.props.displayText}
    </a>
  );
}

class DropDownMenu extends React.Component {
  render = () => (
    <div className="dropdown-menu">
      {this.props.menuItems.map((menuItem, index) => {
        if (menuItem.link) {
          return (
            <DropDownMenuItem
              key={index}
              link={menuItem.link}
              displayText={menuItem.displayText}
            />
          );
        } else if (menuItem.menuItems) {
          return (
            <div className="dropdown-submenu" key={index}>
              <DropDown
                displayText={menuItem.displayText}
                buttonStyle=""
                subMenu={true}
                menuItems={menuItem.menuItems}
              />
            </div>
          );
        } else if (menuItem.component) {
          return <menuItem.component key={index} />;
        } else if (menuItem.displayText) {
          return <DropDownHeader key={index} displayText={menuItem.displayText} />;
        } else {
          return <DividerMenuItem key={index} />;
        }
      })}
    </div>
  );
}

class DropDown extends React.Component {
  dropdownButtonClickHandler(e) {
    let element = $(e.target);

    $(".dropdown-submenu .dropdown-menu").removeAttr("style");

    $(".dropdown-submenu .dropdown, .dropright").each(function() {
      $(this)
        .removeClass("dropright")
        .addClass("dropdown");
    });

    element
      .parents(".dropdown-submenu .dropdown")
      .removeClass("dropdown")
      .addClass("dropright");

    element.parents(".dropdown-submenu .dropdown-menu").toggle();

    element.next(".dropdown-menu").toggle();

    //e.stopPropagation();
    //e.preventDefault();
  }

  render = () => (
    <div className="dropdown">
      <button
        type="button"
        className={`${
          this.props.subMenu ? "dropdown-item" : "btn"
        } dropdown-toggle ${this.props.buttonStyle}`}
        aria-haspopup="true"
        aria-expanded="true"
        onClick={event => this.dropdownButtonClickHandler(event)}
        //{...this.props.dataToggle && {"data-toggle" : "dropdown"}}
        //{...this.props.dataToggle && {"onClick":  (event => this.dropdownButtonClickHandler(event))  }}
      >
        {this.props.displayText}
      </button>
      <DropDownMenu menuItems={this.props.menuItems} />
    </div>
  );
}

const LoginForm = props => (
  <div>
    <form className="px-4 py-3">
      <div className="form-group">
        <label htmlFor="exampleDropdownFormEmail1">Email address</label>
        <input
          type="email"
          className="form-control"
          id="exampleDropdownFormEmail1"
          placeholder="email@example.com"
        />
      </div>
      <div className="form-group">
        <label htmlFor="exampleDropdownFormPassword1">Password</label>
        <input
          type="password"
          className="form-control"
          id="exampleDropdownFormPassword1"
          placeholder="Password"
        />
      </div>
      <div className="form-check">
        <input
          type="checkbox"
          className="form-check-input"
          id="dropdownCheck"
        />
        <label className="form-check-label" htmlFor="dropdownCheck">
          Remember me
        </label>
      </div>
      <button type="submit" className="btn btn-primary">
        Sign in
      </button>
    </form>
    <div className="dropdown-divider" />
    <a className="dropdown-item" href="#">
      New around here? Sign up
    </a>
    <a className="dropdown-item" href="#">
      Forgot password?
    </a>
  </div>
);

const menuItems = [
  { displayText: "Front-End" },
  { displayText: "HTML", link: "#" },
  { displayText: "CSS action", link: "#" },
  { displayText: "Javascript", link: "#" },
  {},
  { displayText: "Back-End" },
  { displayText: "Java", link: "#" },
  { displayText: "C++", link: "#" },
  { displayText: "C#.NET", link: "#" },
  {},
  { displayText: "Login", menuItems: [{ component: LoginForm }] },
  {},
  {
    displayText: "Databases",
    menuItems: [
      { displayText: "Oracle", link: "#" },
      { displayText: "SQL Server", link: "#" },
      { displayText: "MySQL", link: "#" },
      {
        displayText: "No-Sql",
        menuItems: [
          { displayText: "Redis", link: "#" },
          { displayText: "MongoDB", link: "#" },
          { displayText: "MemCache", link: "#" }
        ]
      }
    ]
  }
];

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

$(document).ready(() => {
  $(document).on("click", () => {
    if ($(document.activeElement).is("body, a")) {
      $(".dropdown-menu").removeAttr("style");
    }
  });
});