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();

    let scheme = "light";
    // if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    //     scheme = "dark";
    // }

    return (
        <QueryClientProvider client={queryClient}>
            <TimezoneProvider>
                <FlashProvider>
                    <Router base={"/dashboard"}>
                        <div class={`columns is-gapless dashboard-frame scheme-${scheme}`}>
                            <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>
                </FlashProvider>
            </TimezoneProvider>
        </QueryClientProvider>
    );
}
