use leptos::*;
//use leptos_meta::*;
use leptos_router::*;

use crate::models::OPTIONS;

#[server(ValueAction, "/api")]
pub async fn add_value(device: String, value: String) -> Result<(), ServerFnError> {
    crate::models::Value::insert(device, value)
        .await
        .map(|_| ())
        .map_err(|x| {
            let err = format!("Error while posting a comment: {x:?}");
            tracing::error!("{err}");
            ServerFnError::ServerError("Could not post a comment, try again later".into())
        })
}

#[component]
pub fn FormValues() -> impl IntoView {
    let value_action = create_server_action::<ValueAction>();
    let result = value_action.version();
    let reset_value = create_rw_signal("");
    let _ = create_resource(
        move || (result.get()),
        move |_| async move {
            reset_value.set("");
        },
    );

    view! {
        <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg">
            <h2 class="pb-6 text-2xl text-center">"Formulaire"</h2>

            <ActionForm action=value_action attr:class="">
                <div>
                    <label class="block mt-3 mb-1">Capteur</label>
                    <select name="device" class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60">
                    {OPTIONS.into_iter()
                        .map(|option| view! { <option value={option.value} class="px-2 py-1">{option.name}</option>})
                        .collect::<Vec<_>>()}
                    </select>
                </div>
                <div>
                    <label class="block mt-3 mb-1">Valeur</label>
                    <input name="value"
                           type="number"
                           prop:value=move || reset_value.get()
                           class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
                </div>
                <div>
                    <button type="submit" class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 w-60 my-5">Valider</button>
                </div>
            </ActionForm>
        </div>
    }
}