import { h } from "preact";
import { Router, route } from "preact-router";
import {Header, Menu} from "./";
import { menuReducer, sessionReducer } from "../store/reducers";
import { useReducer } from "preact/hooks";
import { Home, Users, Profile, Login, Logout } from "../route";
import { AppStateProvider } from "../store/AppState";
function App() {
  // useReducer
  const menu = useReducer(menuReducer, false);
  const session = useReducer(sessionReducer, {active: true});
  this.menu_items = [
    { text: "Übersicht", path: "/" },
    { text: "Benutzer", path: "/users" },
    { text: "System", path: "/system" },
    { text: "Profil", path: "/profile" },
    { text: "Abmelden", path: "/logout" }
  ]
  this.handleRoute = async e => {
    switch (e.url) {
      default:
        if (!session[0].active) route('/login', true);
        break;
    }
  };
  return (

      <AppStateProvider value={{ menu, session}} >
        <div id="wrapper">
          <Header  />
          <div class="page">
            <Menu  items={this.menu_items} />
            {!menu[0] &&

              <Router onChange={this.handleRoute}>
                <Home path="/" user="me" />
                <Login path="login" />
                <Profile path="/profile" />
                <Logout path="/logout" />
                <Users path="/users" />
                <div class="container" default>Error 404</div>
              </Router>
            }
          </div>
          <footer>
            <div className="container" style={'text-align: center; align-items: center'}>
              <span>&copy; Jean Jacques Avril 2022 </span>
            </div>

          </footer>
        </div>
      </AppStateProvider>
  );

}

export default App;