import {Component, createSignal, lazy} from "solid-js";
import {Route, Router, Routes} from "@solidjs/router";
import {TopPage} from "./pages/TopPage";
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@suid/material";
import {createCookieStorage} from "@solid-primitives/storage";
import {ApiProvider, useApi} from "./lib/ApiProvider";
import {Configuration, DefaultApi} from "./generated";
import {LoginPage} from "./pages/LoginPage";

export const App: Component = () => {
    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
    const [cookie,setCookie] = createCookieStorage()
    const [api,setApi] = createSignal(new DefaultApi(new Configuration({basePath:window.location.origin+"/api/internal/v1/",apiKey:cookie.key as string})))
    const theme = createTheme({
        palette: {
            mode: prefersDarkMode() ? 'dark' : 'light',
        }
    })
    return (
        <ApiProvider api={api()}>
            <ThemeProvider theme={theme}>
                <CssBaseline/>
                <Router>
                    <Routes>
                        <Route path="/" component={TopPage}/>
                        <Route path="/login" component={LoginPage}/>
                    </Routes>
                </Router>
            </ThemeProvider>
        </ApiProvider>
    )
}