import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import NavbarCollapse from "./navbar-collapse";

export interface INavbarNavProps {
  as?: React.ElementType;
  className?: string;
}

const NavbarNav: React.FC<INavbarNavProps> = ({
  className,
  children,
  as: Component = "ul",
  ...props
}) => {
  const [isMobileMenuExpanded, setMobileMenuExpanded] = React.useState(false);
  const autoSetMobileExpanded = () => setMobileMenuExpanded(!isMobileMenuExpanded);

  return (
    <>
      <button
        className={`navbar-toggler ${isMobileMenuExpanded ? "" : "collapsed"}`}
        onClick={autoSetMobileExpanded}
        type="button"
        aria-expanded={isMobileMenuExpanded}
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <NavbarCollapse
        className="navbar-links w-100"
        isOpen={isMobileMenuExpanded}
        overflow="visible"
      >
        <Component {...props} className={classnames("navbar-nav", className)}>
          {children}
        </Component>
      </NavbarCollapse>
    </>
  );
};

NavbarNav.displayName = "NavbarNav";
NavbarNav.propTypes = {
  className: PropTypes.string
};

export default NavbarNav;