import * as React from 'react';
import { BrowserRouter, Route, Link, history } from "react-router-dom";
import PrivateRoute from '../helper/PrivateRoute';
import { User } from '../class/User';
import { UserType } from '../enums/UserType';
import axios from 'axios';
import NotificationSystem from 'react-notification-system'

// Services
import UserService from '../service/UserService';

// Homepage
import Header from './header/header';
import Footer from './footer';
import Home from './home';
import Register from './register';
import ForgotPassword from './forgotPassword';
import CoachPanel from './coach/coachPanel';
import CustomerPanel from './customer/customerPanel';
import AdminPanel from './admin/adminPanel';
import AccountingPanel from './accounting/accountingPanel';

class Layout extends React.Component<any, any> {
    constructor(props) {
        super(props);

        this.state = {
            user: null,
            notify: null
        }
    }

    componentDidMount() {

        // Notify system ini
        this.setState({ notify: this.refs.notificationSystem });

        // Try to remember the user
        var userJson = null;
        var user = localStorage.getItem("user");
        if (user !== null && user !== "undefined") {
            userJson = JSON.parse(user);
            this.setState({ user: userJson });
            console.log('Found user: ', userJson);

            axios.defaults.headers.common['Authorization'] = 'Bearer ' + userJson.token;
        }
        else {
            console.log('No user found in local storage');
        }
    }

    login = async (username: string, password: string) => {
        let service = new UserService(this.state.notify);
        var user = await service.login(username, password);
        console.log('Login User', user);
        this.setState({ user: user });
    }

    logout = () => {
        let service = new UserService(this.state.notify);
        service.logout();
        this.setState({ user: null });
        console.log("b", this.context.router);
    }

    public render() {
        return (
            <BrowserRouter>
                <div>
                    <NotificationSystem ref="notificationSystem" />
                    <Header user={this.state.user} login={this.login.bind(this)} logout={this.logout.bind(this)} />

                    <Route exact path="/" component={Home} />
                    <Route path="/register" component={Register} />
                    <Route path="/forgotPassword" component={ForgotPassword} />
                    <PrivateRoute path="/coachPanel" component={CoachPanel} redirectTo="/" userType={UserType.Coach} user={this.state.user} />
                    <PrivateRoute path="/adminPanel" component={AdminPanel} redirectTo="/" userType={UserType.Admin} user={this.state.user} />
                    <PrivateRoute path="/customerPanel" component={CustomerPanel} redirectTo="/" userType={UserType.Customer} user={this.state.user} />
                    <PrivateRoute path="/accountingPanel" component={AccountingPanel} redirectTo="/" userType={UserType.Accounting} user={this.state.user} />

                    <Footer />
                </div>
            </BrowserRouter>
        )
    }
}

export default Layout;