import React, { Component } from 'react';
import { Navbar, NavDropdown, Nav } from 'react-bootstrap';
import PropTypes from 'prop-types';

export default class NavigationBar extends Component {
    state = {
        isOpen: false
    };
    
    toggleCollapse() {
        this.setState({ isOpen: !this.state.isOpen });
    }
    
    render() {
        return(
            <Navbar bg="light" className="dark-navbar" expand="lg">
                <Navbar.Brand>Aki Dashboard</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="/">Home</Nav.Link>
                        <Nav.Link href="/dashboard">Dashboard</Nav.Link>
                        <Nav.Link href="/commands">Commands</Nav.Link>
                    </Nav>
                    <NavDropdown title={<img
                        src={`https://cdn.discordapp.com/avatars/${this.props.user.id}/${this.props.user.avatar}.png?size=32`}
                        alt=""
                        className="user-icon-image" />}
                        id="basic=nav-dropdown">
                        <NavDropdown.Item href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</NavDropdown.Item>
                    </NavDropdown>
                </Navbar.Collapse>
            </Navbar>

            // <MDBNavbar color="black" dark expand="md">
            //     <MDBNavbarBrand>
            //         <strong className="white-text">Bot Dashboard</strong>
            //     </MDBNavbarBrand>
            //     <MDBNavbarToggler onClick={this.toggleCollapse} />
            //     <MDBCollapse id="navbarCollapse" isOpen={this.state.isOpen} navbar>
            //         <MDBNavbarNav left>
            //             <MDBNavItem>
            //                 <MDBNavLink to="/">Server Selection</MDBNavLink>
            //             </MDBNavItem>
            //         </MDBNavbarNav>
            //         <MDBNavbarNav right>
            //             <MDBNavItem>
            //                 <MDBDropdown>
            //                     <MDBDropdownToggle nav caret>
            //                         <MDBIcon icon='user' />
            //                     </MDBDropdownToggle>
            //                     <MDBDropdownMenu className="dropdown-default">
            //                         <MDBDropdownItem href="http://localhost:8088/oauth/logout">{`Logout (${this.props.user.username})`}</MDBDropdownItem>
            //                     </MDBDropdownMenu>
            //                 </MDBDropdown>
            //             </MDBNavItem>
            //         </MDBNavbarNav>
            //     </MDBCollapse>
            // </MDBNavbar>
        );
    }
}

NavigationBar.propTypes = {
    user: PropTypes.object
}