import "./styles.scss";
import {JSX} from "preact";
import {useState, useContext} from "preact/hooks";
import style from "./style.module.scss";
import {Container} from "./components/container";
import {Topics} from "./components/topics";
import {Topic as TopicComponent} from "./components/topic";
import {Settings} from "./components/settings";
import {Layout} from "./components/layout";
import {routeCtx, routes} from "@/contexts/route";
import {topicsCtx} from "@/contexts/topics";

export function App(): JSX.Element {
    const [route, setRoute] = useContext(routeCtx);
    const [topicsContext] = useContext(topicsCtx);

    // Router switch
    let routeComponent: JSX.Element;
    let breadcrumbs: JSX.Element;
    let title: string;

    switch (route.name) {
        case "home":
            routeComponent = <Topics page={route.args[0]} setPage={n => setRoute(routes.home(n))}/>
            breadcrumbs = (
                <a
                    href={routes.home(0).location}
                    onClick={e => {
                        e.preventDefault();
                        setRoute(routes.home(0));
                    }}
                >
                    accueil
                </a>
            );
            title = "Liste des sujets";
            break;
        case "topic":
            const topic = topicsContext.topics.find(t => t.id === route.args[0]);
            if (topic) {
                routeComponent = <TopicComponent page={route.args[1] - 1} setPage={n => setRoute(routes.topic(topic.id, n + 1))} topic={topic}/>
                breadcrumbs = (
                    <>
                        <a
                            href={routes.home(0).location}
                            onClick={e => {
                                e.preventDefault();
                                setRoute(routes.home(0));
                            }}
                        >
                            accueil
                        </a>
                        <span> / </span>
                        <b>{topic.title}</b>
                    </>
                )
                title = `Sujet : ${topic.title}`
            } else {
                routeComponent = <div></div>
                breadcrumbs = <>410</>
                title = `410 :)`
            }
            break;
        case "settings":
            routeComponent = <Settings/>
            breadcrumbs = (
                <>
                    <a
                        href={routes.home(0).location}
                        onClick={e => {
                            e.preventDefault();
                            setRoute(routes.home(0));
                        }}
                    >
                        accueil
                    </a>
                    <span> / </span>
                    <b>paramètres</b>
                </>
            )
            title = "Paramètres"
            break;
    }

    return (
        <>
            <header className={style.header}>
                <Container>
                    <h1 className={style.logo}>
                        <a href={routes.home(0).location} onClick={e => {
                            e.preventDefault();
                            setRoute(routes.home(0));
                        }}>
                            JVCGPT
                        </a>
                    </h1>
                </Container>
            </header>
            <main className={style.main}>
                <Container>
                    <Layout
                        breadcrumbs={breadcrumbs}
                        title={title}
                    >
                        {routeComponent}
                    </Layout>
                </Container>
            </main>
        </>
    );
}