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

use crate::{
    api::{get_full_product_by_id, get_products},
    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 = get_products(),
                    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<_>>()
}

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