leptos_i18n::load_locales!();
use i18n::*;
use leptos::*;
use leptos_meta::*;
use leptos_router::*;

use crate::error_template::{AppError, ErrorTemplate};

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {
        <I18nContextProvider>
            <link rel="preconnect" href="https://fonts.googleapis.com"/>
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
            <Stylesheet href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"/>

            // id=leptos means cargo-leptos will hot-reload this stylesheet
            <Stylesheet id="leptos" href="/pkg/tanguy-gerome-fi.css"/>

            <Title text="tanguy.gerome.fi"/>

            <Router fallback=|| {
                let mut outside_errors = Errors::default();
                outside_errors.insert_with_default_key(AppError::NotFound);
                view! {
                    <ErrorTemplate outside_errors/>
                }
                .into_view()
            }>
                <Header/>
                <Routes>
                    <I18nRoute view=|| view! { <Outlet /> }>
                        <Route path="" view=HomePage/>
                    </I18nRoute>
                </Routes>
                <Footer/>
            </Router>
        </I18nContextProvider>
    }
}

#[component]
pub fn LanguageSwitcher() -> impl IntoView {
    let i18n = use_i18n();

    view! {
        <div class="language-switcher main-width">
            <p>{t!(i18n, available_in)}</p>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::en)>english</button>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::fr)>français</button>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::fi)>suomi</button>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::et)>eesti</button>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::sv)>svenska</button>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::eo)>esperanto</button>
            <button class="link" on:click=move |_| i18n.set_locale(Locale::jbo)>lojban</button>
            <p>{t!(i18n, partial_translations)}</p>
        </div>
    }
}

#[component]
fn Header() -> impl IntoView {
    let i18n = use_i18n();

    view! {
        <header>
            <div class="title-links-and-banner">
                <div class="text">
                    <h1><span>tanguy</span><wbr/><span>.gerome</span><span>.fi</span></h1>
                    <div class="links">
                    <A href="/">{t!(i18n, home)}</A>
                    </div>
                </div>
                <img
                    class="image"
                    src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=2000&q=90&fm=avif"
                    alt=""
                />
            </div>

            <LanguageSwitcher/>
        </header>
    }
}

#[component]
fn Footer() -> impl IntoView {
    let i18n = use_i18n();

    view! {
        <footer>
            <div class="name-and-links main-width">
                <span class="name">{t!(i18n, tanguy_gerome)}</span>
                <div class="links">
                    <a href="https://www.instagram.com/kapno.cc/" target="_blank" rel="noopener noreferrer">instagram @kapno.cc</a>
                    <a href="https://github.com/kapnoc" target="_blank" rel="noopener noreferrer">github @kapnoc</a>
                    <a href="mailto:tanguy@gerome.fi" target="_blank" rel="noopener noreferrer">email tanguy@gerome.fi</a>
                </div>
            </div>
        </footer>
    }
}

#[component]
fn HomePage() -> impl IntoView {
    view! {
        <main class="main-width">
            <h1>"Welcome!"</h1>
            <p>"This website is under construction, please check back later :)"</p>
        </main>
    }
}