use dioxus::prelude::*;
use dioxus_material_icons::MaterialIcon;

use crate::{api::get_item, page::supply::SupplyPageParam, Route, TransactionCard};

#[component]
pub fn ItemDetailPage(id: String) -> Element {
    let id = use_signal(|| id.clone());
    let item = get_item(&id.read()).unwrap();
    let inventory_future = use_resource(move || async move {
        let item = crate::API.read().as_ref().unwrap().get_item(id()).unwrap();
        crate::api::API::get_inventory(item.uuid.clone(), None).await
    });

    rsx! {
        div {
            class: "p-4 flex flex-col h-screen",

            header {
                class: "text-white text-lg font-bold",
                {item.name.as_str()}
            }
            div {
                class: "flex flex-col space-y-4",
                div {
                    class: "flex items-start space-x-4",
                    if let Some(image) = &item.image {
                            img {
                                src: crate::API.read().as_ref().unwrap().get_url_instance(image.to_string()),
                                width: "192",
                                class: "h-24 w-24"
                            }
                    },
                    div {
                        strong { "{item.name}" }
                        if let Some(category) = &item.category {
                            p { "{category}" }
                        }
                    }
                }

                EventButton {
                    icon: "pallet",
                    title: "Supply",
                    onclick: move |_| {
        navigator().push(
            Route::SupplyPage {
                item: item.uuid.clone(),
                param: SupplyPageParam {
                    only_variants: None,
                    force_price: None,
                    force_origin: None,
                },
            }
        );
    }
                 }

                div {
                    class: "grid grid-cols-2 gap-4",
                    {item.variants.iter().map(|(key, variant)| {
                        rsx! {
                            div {
                                strong { {variant.name.as_str()} }
                                // TODO : stats
                            }
                        }
                    })}
                }


            }

            div {
                class: "flex-1 overflow-auto",
                match &*inventory_future.read_unchecked() {
                    Some(inventory) => {
                        rsx! {
                            for t in inventory {
                                p {
                                    key: {t.uuid.clone()},
                                    TransactionCard { t: t.clone() }
                                }
                            }
                        }
                        },
                    None => {
                        rsx! { p { "Loading inventory..." } }
                    }
                }
            }


        }
    }
}

#[component]
pub fn EventButton(icon: String, title: String, onclick: EventHandler<MouseEvent>) -> Element {
    rsx! {
            button {
        class: "\
            flex items-center gap-2 px-3 py-1.5 rounded-md \
            text-sm font-medium \
            border border-neutral-300 dark:border-neutral-700 \
            text-neutral-800 dark:text-neutral-200 \
            bg-white dark:bg-neutral-900 \
            hover:bg-neutral-100 dark:hover:bg-neutral-800 \
            hover:shadow-sm \
            transition-all duration-200 cursor-pointer w-fit",
        onclick: onclick,
        MaterialIcon {
            name: icon,
            size: 20
        },
        {title}
    }
        }
}