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

use crate::{
    api::{
        amount_by_id_wrapped, product_by_id_wrapped, products_in_storage_wrapped,
        unit_by_id_wrapped,
    },
    components::{async_fetch::AsyncFetch, site_header::SiteHeader},
};

#[component]
pub fn Inventory() -> impl IntoView {
    view! {
        <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>
    }
}

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<(Product, ProductAmount, Unit), leptos::error::Error> {
    let product = product_by_id_wrapped(id).await?;
    let amount = amount_by_id_wrapped(id).await?;
    let unit = unit_by_id_wrapped(amount.amount.unit).await?;

    Ok((product, amount, unit))
}

fn format_full_product((product, amount, unit): (Product, ProductAmount, Unit)) -> impl IntoView {
    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>
    }
}