use std::sync::Arc;

use leptos::{
    IntoView, component,
    error::ErrorBoundary,
    prelude::{CollectView, ElementChild, Get, GetUntracked},
    view,
};
use leptos_router::{
    NavigateOptions,
    hooks::{use_navigate, use_query_map},
};
use rocie_client::apis::configuration::Configuration;
use thaw::{Layout, LayoutPosition};

use crate::components::{product_overview::ProductOverview, side_header::SiteHeader};

#[component]
pub fn Home(config: Arc<Configuration>) -> impl IntoView {
    let query_map = use_query_map().get_untracked();
    let navigate = use_navigate();

    // mobile page
    if let Some(path) = query_map.get("path") {
        navigate(&path, NavigateOptions::default());
    }

    view! {
        <ErrorBoundary fallback=|errors| {
            view! {
                <h1>"Uh oh! Something went wrong!"</h1>

                <p>"Errors: "</p>
                // Render a list of errors as strings - good for development purposes
                <ul>
                    {move || {
                        errors
                            .get()
                            .into_iter()
                            .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                            .collect_view()
                    }}
                </ul>
            }
        }>

            <Layout position=LayoutPosition::Absolute>
                <SiteHeader />
                <Layout>
                    <ProductOverview config />
                </Layout>
            </Layout>
        </ErrorBoundary>
    }
}