import React, {Component} from 'react'
import {httpService} from "../services/http-service";
import {AuthService} from "../services/auth-service";

class Layout extends Component {

    constructor(props) {
        super(props);
        this.authService = new AuthService(httpService);
    }

    render() {
        return (
            <div>
                <Navbar logoutHandler={this.logoutHandler.bind(this)}/>
                {this.props.children}
            </div>
        );
    }

    logoutHandler(e) {
        this.authService.logout();
        window.location.replace("/");
    }
}

class Navbar extends Component {

    render() {
        return (
            <div className="Introduction">
                <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div className="container-fluid">
                        <a className="navbar-brand" href="/">Strategy Game</a>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>

                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                                <li className="nav-item">
                                    <a className="nav-link" href="/about">About</a>
                                </li>

                                <li className="nav-item">
                                    <a className="nav-link" href="#" onClick={this.props.logoutHandler}>Logout</a>
                                </li>


                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        );
    }
}

export default Layout;