use leptos::{
    IntoView, component,
    prelude::{ClassAttribute, ElementChild},
    view,
};

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! {
                    fetcher = {get_products()}
                    producer = |products| {
                        products
                         .into_iter()
                         .map(|product| {
                            view! {
                                {AsyncFetch! {
                                    fetcher = {get_full_product_by_id(product.id)}
                                    producer = |(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>
                                      }
                                    }
                                }}
                            }
                        })
                        .collect::<Vec<_>>()
                    }
                }
            }
        </ul>
    }
}