import React from "react";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";
import "../../scss/components/NavbarComponent.scss";

interface ILabelHref {
    label: string | JSX.Element;
    href?: string;
    isActive?: boolean;
    onClick?: () => void;
}
interface IPropsNavbar {
    logout: () => void;
    displayName: string;
    menuItems: ILabelHref[];
    dropdownItems: ILabelHref[];
}
export default class NavbarComponent extends React.Component {
    props: IPropsNavbar = {
        logout: (): void => {},
        displayName: "Blandine Barbe",
        menuItems: [],
        dropdownItems: []
    };
    constructor(props: IPropsNavbar) {
        super(props);
    }
    render(): JSX.Element {
        return (
            <Navbar expand="lg">
                <Navbar.Brand href="/">
                    <img className="logo" alt="Logo" src="/images/Logo.png" />
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        {this.props.menuItems.map(e => (
                            <Nav.Link href={e.href} onSelect={e.onClick ? e.onClick : () => {}} active={e.isActive}>
                                {e.label}
                            </Nav.Link>
                        ))}
                    </Nav>
                    <Nav>
                        <NavDropdown title={this.props.displayName} id="basic-nav-dropdown" alignRight>
                            {this.props.dropdownItems.map(e => (
                                <NavDropdown.Item href={e.href} onClick={e.onClick ? e.onClick : () => {}}>
                                    {e.label}
                                </NavDropdown.Item>
                            ))}
                        </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}