use leptos::*;
use leptos_meta::*;
use leptos_router::*;

use crate::routes::*;

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Stylesheet href="/pkg/rust_leptos.css"/>

        <Title text="Bienvenue à la maison"/>

        <div class="h-screen flex flex-col">
            <Router>
                <Navigation />
                <main class="flex-1">
                    <Routes>
                        <Route path="/" view=move || view! { <Home/> }/>
                        <Route path="/liens" view=move || view! { <Links/> }/>
                        <Route path="/formulaire" view=move || view! { <FormValues/> }/>
                        <Route path="/donnees" view=move || view! { <Data/> }/>
                        <Route path="/volets" view=move || view! { <Shutters/> }/>
                        //<Route path="/*any" view=move || view! { <NotFound/> }/>
                    </Routes>
                </main>
                <footer>Footer</footer>
            </Router>
        </div>
    }
}

#[component]
pub fn Navigation() -> impl IntoView {
    let location = use_location();

    view! {
        <nav class="flex gap-5 px-2 py-1 text-lg">
            <a href="/"
               class="hover:text-third hover:border-b border-third inline-block transition-colors"
               class:active-link=move || location.pathname.get() == "/">Home</a>
            <a href="/liens"
               class="hover:text-third hover:border-b border-third inline-block transition-colors"
               class:active-link=move || location.pathname.get() == "/liens">Liens</a>
            <a href="/formulaire"
               class="hover:text-third hover:border-b border-third inline-block transition-colors"
               class:active-link=move || location.pathname.get() == "/formulaire">Formulaire</a>
            <a href="/donnees"
                class="hover:text-third hover:border-b border-third inline-block transition-colors"
                class:active-link=move || location.pathname.get() == "/donnees">Données</a>
            <a href="/volets"
                class="hover:text-third hover:border-b border-third inline-block transition-colors"
                class:active-link=move || location.pathname.get() == "/volets">Volets</a>
        </nav>
    }
}

#[component]
pub fn Home() -> impl IntoView {
    view! {
        <h1 class="m-2">Home</h1>
    }
}

#[component]
pub fn NotFound() -> impl IntoView {
    view! {
        <h1>Not Found</h1>
    }
}