import React, {Component} from 'react';
import Logo from "../Images/logo.jpg";
import logout from "../Images/logout2.png";

export default class NavBar extends Component {

    constructor(props) {
        super(props);

        this.state = {
            user_email : '',
            user_id : '',
            user_name :'',
            user_type :'',
            isLogged : false
        }
    }

    componentDidMount() {

        const user_email = localStorage.getItem("email");
        const user_id = localStorage.getItem("userID");
        const user_name = localStorage.getItem("userName");
        const user_type = localStorage.getItem("userType");

        if(user_id !== " "){
            this.setState({
                isLogged : true
            })
        }

        this.setState({
            user_email: user_email,
            user_id : user_id,
            user_name : user_name,
            user_type : user_type
        })

        console.log(user_email);
        console.log(user_name);

    }

    render() {
        return (

            <nav className="navbar navbar-expand-lg" style={{background:'#1E4258',position: 'fixed',
                width:'100%', marginTop: '0%', zIndex:'100'}}>

                <button className="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"/>
                </button>
                <img src={Logo} style={{width:'200px', height:'50px'}}/>
                <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div className="navbar-nav">
                        <a className="nav-item nav-link " style={{color:'white', marginLeft:'50px'}} href="/Home"><h5>Home</h5> <span
                            className="sr-only">(current)</span></a>

                    </div>

                    <label style={{
                        position: 'absolute',
                        top: '15px',
                        right: '120px',
                        color: '#EAE4E4',
                        marginRight: '50px',
                        cursor:'pointer'
                    }}><h5>{this.state.user_name !== null ? <span style={{cursor:'pointer'}} onClick={()=>{ window.location.replace("/studentDashboard");}}> {this.state.user_name}</span>  : <label style={{cursor:'pointer'}} onClick={() => {
                        // window.location.replace("UserLogin");
                        window.location = '/UserLogin';
                    }}>Login</label>} </h5></label>
                    {this.state.user_name !== null && <img src={logout} onClick={() => {
                        localStorage.clear();
                        window.location = '/UserLogin';
                    }} style={{position: 'absolute', top: '15px', right: '30px', width:'30px', height:'30px',cursor:'pointer'}}/>}

                    {/*{this.state.user_name !== null && <h5 onClick={() => {*/}
                    {/*    localStorage.clear();*/}
                    {/*    window.location.replace("/UserLogin");*/}
                    {/*}} style={{position: 'absolute', top: '15px', right: '30px', color: 'darkred'}}><b>Logout</b></h5>}*/}
                </div>
            </nav>


        )
    }
}
