use leptos::{
    IntoView, component,
    prelude::{ClassAttribute, ElementChild, GetUntracked},
    view,
};
use leptos_router::{
    NavigateOptions,
    hooks::{use_navigate, use_query_map},
};

use crate::components::{
    catch_errors::CatchErrors, inventory::Inventory, login_wall::LoginWall,
    product_overview::ProductOverview, product_parent_overview::ProductParentOverview,
    recipies::Recipies, site_header::SiteHeader, unit_overview::UnitOverview,
};

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

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

    view! {
        <CatchErrors>
            <LoginWall back=move || "/".to_owned()>
                <SiteHeader logo=icondata_io::IoRoseSharp back_location="/" name="Rocie" />

                <div class="flex flex-col content-start">
                    <Inventory />
                    <Recipies />
                    <hr class="w-8 h-0.5 rounded-lg mt-4 self-center bg-gray-500" />
                    <ProductOverview />
                    <UnitOverview />
                    <ProductParentOverview />
                </div>
            </LoginWall>
        </CatchErrors>
    }
}