use leptos::{
    IntoView, component,
    prelude::{ClassAttribute, ElementChild},
    view,
};
use rocie_client::models::{Product, ProductAmount, ProductId, Unit};

use crate::{
    api::{
        amount_by_id_404_wrapped, product_by_id_wrapped, products_in_storage_wrapped,
        unit_by_id_wrapped,
    },
    components::{
        async_fetch::AsyncFetch, catch_errors::CatchErrors, login_wall::LoginWall,
        site_header::SiteHeader,
    },
};

#[component]
pub fn Inventory() -> impl IntoView {
    view! {
        <CatchErrors>
            <LoginWall back=move || "/inventory".to_owned()>
                <SiteHeader logo=icondata_io::IoArrowBack back_location="/" name="Inventory" />

                <ul class="flex flex-col p-2 m-2">
                    {
                        AsyncFetch! {
                            @map_error_in_producer
                        fetcher = products_in_storage_wrapped(),
                        producer = render_products,
                        }
                    }
                </ul>
            </LoginWall>
        </CatchErrors>
    }
}

fn render_products(products: Vec<Product>) -> impl IntoView {
    products
        .into_iter()
        .map(|product| {
            AsyncFetch! {
                @map_error_in_producer
                fetcher = get_full_product_by_id(product.id),
                producer = format_full_product,
            }
        })
        .collect::<Vec<_>>()
}

async fn get_full_product_by_id(
    id: ProductId,
) -> Result<Option<(Product, ProductAmount, Unit)>, leptos::error::Error> {
    let product = product_by_id_wrapped(id).await?;
    let amount = amount_by_id_404_wrapped(id).await?;

    if let Some(amount) = amount {
        let unit = unit_by_id_wrapped(amount.amount.unit).await?;

        Ok(Some((product, amount, unit)))
    } else {
        Ok(None)
    }
}

fn format_full_product(maybe_product: Option<(Product, ProductAmount, Unit)>) -> impl IntoView {
    maybe_product.map(|(product, amount, unit)| {
        view! {
            <ul class="my-3">
                <li class="m-2">{product.name}</li>
                <li class="m-2">
                    <span class="bg-gray-200 p-1 px-2 rounded-lg">
                        {format!("{} {}", amount.amount.value, unit.short_name)}
                    </span>
                </li>
            </ul>
        }
    })
}