import Login from './Auth/Login';
import Root from './Root';
import Authenticator from './../Authenticator';
import Notification from './Notification';
import './../Styles/App.scss';

import { useEffect, useState } from 'react';
import { useDispatch, connect } from 'react-redux'
import { BrowserRouter, Switch, Route } from 'react-router-dom';

function App({ user }) {
    const [ notificationText, setNotificationText ] = useState('');
    const [ hasError, setHasError ] = useState(false);

    const dispatch = useDispatch();

    useEffect(() => {
        Authenticator.getLoggedInUserFromCookie()
            .then((res) => {
                dispatch({ type: 'authenticator/updatelocaluserobject', user: res })
            })
            .catch(() => {
                setNotificationText('An error has occoured.');
                setHasError(true);
            });
    }, [dispatch]);

    if (!hasError) {
        return (
            <div id="main-container">
                <BrowserRouter>
                    <Switch>
                        <Route path="/login">
                        <Login />
                        </Route>
                        <Route path="/">
                            <Root user={user} />
                        </Route>
                    </Switch>
                </BrowserRouter>
            </div>
        );
    } else {
        return (
            <div id="main-container">
                <Notification text={notificationText}/>
            </div>
        );
    }
}

const stateToProps = (state) => {
    return {
        user: state?.user
    };
};

export default connect(stateToProps)(App);