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";
import {ColorSchemeProvider, useColorScheme} from "./ColorSchemeProvider";
import {useEffect} from "preact/hooks";

const InnerApp = () => {
    const {colorScheme} = useColorScheme();

    useEffect(() => {
        const body = document.querySelector("body");
        body.className = body.className.replace(/scheme-\w+/g, "");
        body.classList.add(`scheme-${colorScheme}`);
    }, [colorScheme]);

    return (
        <Router base={"/dashboard"}>
            <div class={`columns is-gapless dashboard-frame scheme-${colorScheme}`}>
                <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"}>
                                <Guild>
                                    <GuildReminders/>
                                </Guild>
                            </Route>
                            <Route path={"/:guild/todos"}>
                                <Guild>
                                    <GuildTodos/>
                                </Guild>
                            </Route>
                            <Route>
                                <Welcome/>
                            </Route>
                        </Switch>
                    </div>
                </div>
            </div>
        </Router>
    );
};

const queryClient = new QueryClient();

export function App() {

    return (
        <QueryClientProvider client={queryClient}>
            <ColorSchemeProvider>
                <TimezoneProvider>
                    <FlashProvider>
                        <InnerApp/>
                    </FlashProvider>
                </TimezoneProvider>
            </ColorSchemeProvider>
        </QueryClientProvider>
    );
}