import { Sidebar } from "../Sidebar";
import { QueryClient, QueryClientProvider } from "react-query";
import { Route, Router, Switch } from "wouter";
import { Welcome } from "../Welcome";
import { Guild } from "../Guild";
import { FlashProvider } from "./FlashProvider";
import { TimezoneProvider } from "./TimezoneProvider";
import { User } from "../User";
import { GuildReminders } from "../Guild/GuildReminders";
import { GuildTodos } from "../Guild/GuildTodos";

export function App() {
    const queryClient = new QueryClient();

    return (
        <TimezoneProvider>
            <FlashProvider>
                <QueryClientProvider client={queryClient}>
                    <Router base={"/dashboard"}>
                        <div class="columns is-gapless dashboard-frame">
                            <Sidebar />
                            <div class="column is-main-content">
                                <div style={{ margin: "0 12px 12px 12px" }}>
                                    <Switch>
                                        <Route path={"/@me/reminders"} component={User}></Route>
                                        <Route
                                            path={"/:guild/reminders"}
                                            component={() => (
                                                <Guild>
                                                    <GuildReminders />
                                                </Guild>
                                            )}
                                        ></Route>
                                        <Route
                                            path={"/:guild/todos"}
                                            component={() => (
                                                <Guild>
                                                    <GuildTodos />
                                                </Guild>
                                            )}
                                        ></Route>
                                        <Route>
                                            <Welcome />
                                        </Route>
                                    </Switch>
                                </div>
                            </div>
                        </div>
                    </Router>
                </QueryClientProvider>
            </FlashProvider>
        </TimezoneProvider>
    );
}