use leptos::{
    IntoView, component,
    html::Input,
    prelude::{ClassAttribute, ElementChild, Get, NodeRef, OnAttribute, Set, signal},
    view,
    web_sys::SubmitEvent,
};

use crate::components::{input_placeholder::InputPlaceholder, site_header::SiteHeader};

#[component]
pub fn Buy() -> impl IntoView {
    let (product_barcode, set_product_barcode) = signal(String::new());

    let input_element: NodeRef<Input> = NodeRef::new();

    let on_submit = move |ev: SubmitEvent| {
        // stop the page from reloading!
        ev.prevent_default();

        let value = input_element
            .get()
            // event handlers can only fire after the view
            // is mounted to the DOM, so the `NodeRef` will be `Some`
            .expect("<input> to exist")
            .value();
        set_product_barcode.set(value);
    };

    view! {
        <SiteHeader logo=icondata_io::IoPricetag back_location="/" name="Buy" />
        <form class="flex flex-col contents-start m-2 g-2" on:submit=on_submit>
            <InputPlaceholder input_type="number" label="Product Barcode" node_ref=input_element />
            <input type="submit" value="Submit" />
        </form>
        <p>"Name is: " {product_barcode}</p>
    }
}