use std::sync::Arc;

use leptos::{
    IntoView, component,
    error::ErrorBoundary,
    prelude::{
        ClassAttribute, CollectView, ElementChild, Get, Read, ReadSignal, Set, With, signal,
    },
    reactive::spawn_local,
    server::{LocalResource, Resource},
    view,
};
use rocie_client::apis::{
    api_get_product_api::{ProductsError, products},
    configuration::Configuration,
};

#[component]
pub fn Home(config: Arc<Configuration>) -> impl IntoView {
    let (read_status, write_status) = signal("Loading..".to_owned());

    {
        let local_config = Arc::clone(&config);

        spawn_local(async move {
            let products = products(&local_config).await;

            write_status.set(
                products
                    .as_ref()
                    .map(move |products| {
                        let products_num = products.len();
                        let plural_s = if products_num == 1 { "" } else { "s" };
                        let products_value = 2;
                        let products_currency = "EUR";
                        format!(
                            "You have {products_num} product{plural_s} \
                         in stock with a value \
                         of {products_value} {products_currency}.",
                        )
                    })
                    .unwrap(),
            );
        });
    }

    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>
            }
        }>

            <nav>
                <div class="nav">
                    <img
                        src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg"
                        alt="Rocie Logo"
                        height="200"
                        width="400"
                    />
                    <h1>Rocie</h1>
                </div>
            </nav>

            <div class="container">
                <div class="container">
                    <h1>"Inventory"</h1>

                    <p>{read_status}</p>
                </div>

                <div class="container">
                    <h1>"Recipies"</h1>
                </div>

                <div class="container">
                    <h1>"Shopping list"</h1>
                </div>
            </div>
        </ErrorBoundary>
    }
}