use leptos::{
    IntoView, component,
    prelude::{Get, Show, signal},
    task::spawn_local,
    view,
};
use log::info;
use rocie_client::models::BarcodeId;

use crate::{
    api::{buy_barcode_external_wrapped, get_config},
    components::{banner::Banner, form::Form, site_header::SiteHeader},
};

#[component]
pub fn Buy() -> impl IntoView {
    let (on_submit_errored, on_submit_errored_set) = signal(None);

    view! {
        <SiteHeader logo=icondata_io::IoPricetag back_location="/" name="Buy" />

        <Show when=move || on_submit_errored.get().is_some()>
            <Banner text=move || on_submit_errored.get().expect("Should be some") />
        </Show>

        {
            Form! {
                on_submit = |barcode_number, times| {
                    let config = get_config!();

                    spawn_local(async move {
                        if let Err(err) = buy_barcode_external_wrapped(&config, BarcodeId { value: barcode_number }, u32::from(times)).await {
                            let error = format!("Error in form on-submit for barcode `{barcode_number}`: {err}");

                            on_submit_errored_set.set(Some(error));
                        } else {
                            on_submit_errored_set.set(None);
                        }


                        info!("Bought barcode {barcode_number} {times} times");
                    });
                };

                <Input
                    name=barcode_number,
                    rust_type=u32,
                    html_type="number",
                    label="Barcode Number",
                />

                <Input
                    name=times,
                    rust_type=u16,
                    html_type="number",
                    label="Times"
                />
            }
        }
    }
}