import React from "react"
import { Container, Nav, Navbar, Offcanvas } from "react-bootstrap"
import "./Header.scss"

type Breakpoint = "sm" | "md" | "lg" | "xl" | "xxl"

interface HeaderProps {
    className?: string | undefined
    Brand?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null
    PrimaryItems?:
        | React.ReactElement[]
        | React.ReactElement
        | ((props: any) => React.JSX.Element | undefined | null)
        | undefined
        | null
    SecondaryItems?:
        | React.ReactElement[]
        | React.ReactElement
        | ((props: any) => React.JSX.Element | undefined | null)
        | undefined
        | null
    SearchComponent?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null
    BannerComponent?: React.ReactElement | ((props: any) => React.JSX.Element | undefined | null) | undefined | null
    breakpoint?: Breakpoint
    alignNav?: "start" | "center" | "end"
}

const Header = (props: HeaderProps) => {
    const {
        className,
        Brand = (
            <a href="https://pacificdata.org">
                <img
                    src="/images/logo_horizontal_white_orange.svg"
                    alt="Pacific Data Hub"
                    className="d-inline-block align-top"
                />
            </a>
        ),
        PrimaryItems,
        SecondaryItems,
        SearchComponent,
        BannerComponent,
        alignNav = "center",
        breakpoint = "lg",
    } = props

    return (
        <header className={`pdh-header ${className ?? ""}`}>
            <div className="pdh-header-background">
                {SecondaryItems && (
                    <Navbar
                        expand={true}
                        className="top-navbar py-2 justify-content-end align-items-center position-relative"
                    >
                        {typeof SecondaryItems === "function" ? <SecondaryItems /> : SecondaryItems}
                    </Navbar>
                )}
                <Navbar expand={breakpoint} className="bg-body-tertiary">
                    <Container fluid>
                        <Navbar.Brand>{typeof Brand === "function" ? <Brand /> : Brand}</Navbar.Brand>
                        <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${breakpoint}`} />
                        <Navbar.Offcanvas
                            id={`offcanvasNavbar-expand-${breakpoint}`}
                            aria-labelledby={`offcanvasNavbarLabel-expand-${breakpoint}`}
                            placement="end"
                            className="pdh-offcanvas btn-close-white text-bg-dark"
                        >
                            <Offcanvas.Header closeButton className="text-bg-dark">
                                <Offcanvas.Title id={`offcanvasNavbarLabel-expand-${breakpoint}`}>
                                    {typeof Brand === "function" ? <Brand /> : Brand}
                                </Offcanvas.Title>
                            </Offcanvas.Header>
                            <Offcanvas.Body>
                                {SearchComponent && (
                                    <div className="d-flex justify-content-center flex-grow-1">
                                        {typeof SearchComponent === "function" ? <SearchComponent /> : SearchComponent}
                                    </div>
                                )}
                                <Nav
                                    className={`justify-content-end align-items-${breakpoint}-${alignNav} flex-grow-1`}
                                >
                                    {typeof PrimaryItems === "function" ? <PrimaryItems /> : PrimaryItems}
                                </Nav>
                            </Offcanvas.Body>
                        </Navbar.Offcanvas>
                    </Container>
                </Navbar>
                {BannerComponent && typeof BannerComponent === "function" ? <BannerComponent /> : BannerComponent}
            </div>
        </header>
    )
}

export default Header
export { Header, HeaderProps }