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

use crate::i18n::*;
use crate::error_template::{AppError, ErrorTemplate};
// use crate::services::contentful::get_rich_text_page;
// use crate::services::rich_text;

use crate::routes::gallery;

#[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/>
                        // <Route path="/blog" view=BlogList/>
                        // <Route path="/blog/:slug" view=BlogPost/>
                        <Route path="/gallery" view=gallery::Gallery>
                            <Route path=":slug" view=gallery::GalleryEntry/>
                            <Route path="" view=|| view! {}/>
                        </Route>
                    </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]
pub fn Header() -> impl IntoView {
    let i18n = use_i18n();

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

            <LanguageSwitcher/>
        </header>
    }
}

#[component]
pub 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]
pub fn HomePage() -> impl IntoView {
    view! {
        <main class="main-width">
            <h1>Welcome!</h1>

            <p>I am <b>Tanguy Gérôme</b>, a 26 year old software developer, amateur photographer, and over all nerd living in Helsinki, Finland, originally from Cornimont, France.</p>

            <p>
                On here you can find my personal photography portfolio, and (coming) a blog where I scribble about whatever comes to mind in relation to my hobbies and interests, including:

                <ul>
                    <li>Linux</li>
                    <li>video games</li>
                    <li>knitting</li>
                    <li>hiking</li>
                    <li>scouting</li>
                    <li>language learning</li>
                    <li>photography (digital and film)</li>
                </ul>
            </p>

            <p>I am also using this website as a way to practice in my language learning journey, so expect unfinished and low quality translations for anything other than English and French :D</p>

            <p>This website is still under construction, more content to come (hopefully) soon.</p>

            // <Await future=move || get_rich_text_page("home-page".to_string()) let:page>
            //     {match page {
            //         Ok(page) => {
            //             view! {
            //                 <div>
            //                     {rich_text::document_handler(&page.english.rich_text_content)}
            //                 </div>
            //             }
            //         },
            //         Err(error) => view! { <div><p>"Error: "{error.to_string()}</p></div> }
            //     }}
            // </Await>
        </main>
    }
}