import { h } from "preact";
import { Router, route } from "preact-router";
import { useReducer } from "preact/hooks";
import { Header, Menu } from "./index.js";
import { Home, Users, EditUser, Login, Logout, System } from "../route";
import { AppStateProvider, UserTableProvider, menuReducer, sessionReducer, userTableReducer } from "../store";

function App() {
  // useReducer
  const menu = useReducer(menuReducer, false);
  const session = useReducer(sessionReducer, { active: true });
  const [usertable, userreducer] = useReducer(userTableReducer, []);

  this.menu_items = [
    { text: "Übersicht", path: "/" },
    { text: "Benutzer", path: "/users" },
    { text: "System", path: "/system" },
    { 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] &&
            <UserTableProvider value={{ usertable, userreducer }} >
              <Router onChange={this.handleRoute}>
                <Home path="/" user="me" />
                <Login path="login" />
                <System path="/system" />
                <Logout path="/logout" />
                <Users path="/users/:pageid?" />
                <EditUser path="/edituser/:userid" />
                <div class="container" default>Error 404</div>
              </Router>
            </UserTableProvider>
          }
        </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;