import React from "react"
import BootstrapNavbar, { NavbarProps as BootstrapNavbarProps } from "react-bootstrap/Navbar"
import { Nav, NavLink, NavDropdown, DropdownDivider } from "react-bootstrap"
import "./Navbar.scss"

interface NavbarProps extends BootstrapNavbarProps {
    Brand?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null
    Search?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null
    brandClassName?: string | undefined
    navClassName?: string | undefined
    toggleClassName?: string | undefined
    alignNav?: "start" | "center" | "end"
}

const Navbar = (props: NavbarProps) => {
    const {
        children,
        className,
        Brand,
        brandClassName,
        Search,
        navClassName,
        toggleClassName,
        alignNav = "center",
        expand = true,
        ...otherProps
    } = props

    const childrenArray = React.Children.toArray(children)

    return (
        <BootstrapNavbar
            className={`${className ?? "bg-primary"} ${Search ? "with-search" : ""}`}
            expand={expand}
            {...otherProps}
        >
            {Brand && <div className={brandClassName}>{typeof Brand === "function" ? <Brand /> : Brand}</div>}
            {typeof Search === "function" ? <Search /> : Search}
            <BootstrapNavbar.Toggle className={`ms-auto ${toggleClassName ?? ""}`} />
            <BootstrapNavbar.Collapse className={`ms-auto flex-grow-0 justify-content-between align-self-${alignNav}`}>
                <Nav className={`${navClassName ?? ""}`}>
                    {childrenArray.map((child, index) => {
                        return <div key={index}>{child}</div>
                    })}
                </Nav>
            </BootstrapNavbar.Collapse>
        </BootstrapNavbar>
    )
}

Navbar.Link = NavLink
Navbar.Dropdown = NavDropdown
Navbar.Divider = DropdownDivider

export default Navbar
export { Navbar, NavbarProps }