import React, { Component } from "react";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import UserSessionWidget from "./UserComponents/userSessionWidget";
import Container from 'react-bootstrap/Container';
import { LinkContainer } from 'react-router-bootstrap';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as authenticationActions from '../actions/AuthenticationActions'
import * as userManagementActions from '../actions/UserManagementActions';
import * as degreeCourseManagementActions from '../actions/DegreeCourseManagementActions';

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken,
        isAdmin: state.AuthenticationReducer.isAdmin
    };
}


class TopMenu extends Component {

    constructor(props) {
        super(props)

        this.handleUserManagementButtonAction = this.handleUserManagementButtonAction.bind(this);
        this.handleDegreeCourseManagementButtonAction = this.handleDegreeCourseManagementButtonAction.bind(this)
    };

    async handleUserManagementButtonAction() {
        const { showAllUsers } = this.props;
        await showAllUsers(this.props.accessToken)
    }

    async handleDegreeCourseManagementButtonAction() {
        const { showAllDegreeCourses } = this.props;
        await showAllDegreeCourses(this.props.accessToken)
    }

    render() {
        let OpenManagementPageButtons;
        console.log(this.props.isAdmin)
        if (this.props.isAdmin) {
            OpenManagementPageButtons =
                <>
                    <LinkContainer to="/userManagement" id="OpenUserManagementPageButton" onClick={this.handleUserManagementButtonAction}>
                        <Nav.Link>User-Management</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/degreeCourseManagement" id="OpenDegreeCourseManagementPageButton" onClick={this.handleDegreeCourseManagementButtonAction}>
                        <Nav.Link>DegreeCourse-Management</Nav.Link>
                    </LinkContainer>
                </>
        } else { }
        
        return (
            <div>
                <Navbar bg="light" expand="lg">
                    <Container style={{ margin: 0 }}>
                        <LinkContainer to="/" id="OpenStartPageButton">
                            <Navbar.Brand>BHT</Navbar.Brand>
                        </LinkContainer>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav" style={{ display: 'flex', flexWrap: 'row', justifyContent: 'space-between', width: '100%' }}>
                            <Nav className="mr-auto">
                                <LinkContainer to="/" id="OpenStartPageButton">
                                    <Nav.Link>Home</Nav.Link>
                                </LinkContainer>
                                {OpenManagementPageButtons}
                                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                    <NavDropdown.Item href="#action/3.2">
                                        Another action
                                    </NavDropdown.Item>
                                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                    <NavDropdown.Divider />
                                    <NavDropdown.Item href="#action/3.4">
                                        Separated link
                                    </NavDropdown.Item>
                                </NavDropdown>
                            </Nav>
                            <UserSessionWidget />
                        </Navbar.Collapse>
                    </Container>
                </Navbar>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    authenticateUserAction: authenticationActions.authenticateUser,
    showAllUsers: userManagementActions.displayUsers,
    showAllDegreeCourses: degreeCourseManagementActions.displayDegreeCourses
}, dispatch)

const ConnectedTopMenu = connect(mapStateToProps, mapDispatchToProps)(TopMenu);
export default ConnectedTopMenu;