import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { Route, Router, route } from 'preact-router';

// import mcratesStore from './store';
import actions from './actions';

import Header from './components/header';

import Home from './routes/home';
import Login from './routes/login';
import Search from './routes/search';
import User from './routes/user';

// const store = mcratesStore();

function App() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        async function getLogin() {
            const user = await actions.getLogin();
            if (!user) return route('/login');
            setUser(user);
            route('/');
        }

        getLogin();
    }, []);

    function loginSuccess(user) {
        setUser(user);
    }

    return (
        <main id="app">
            <Header user={user} />
            <Router>
                <Route path="/" component={Home} />
                <Route path="/login" component={Login} success={loginSuccess} />
                <Route path="/search" component={Search} />
                <Route path="/user/:userId" component={User} />
            </Router>
        </main>
    );
}

export default App;