use sycamore::prelude::*;
use web_sys::{console, wasm_bindgen::JsValue};

use crate::AppState;
use crate::Constraint;

#[component]
pub fn AddRemove() -> View {
    view! {
        div(id="add-remove") {
            button(
                on:click=|_| {
                    let state = use_context::<AppState>();
                    state.assembly.insert_new_element();
                    
                    /* DEBUG */
                    // print updated list of elements by identifier
                    console::log_1(&JsValue::from("elements by identifier:"));
                    for (id, key) in state.assembly.elements_by_id.get_clone().iter() {
                        console::log_3(
                            &JsValue::from(" "),
                            &JsValue::from(id),
                            &JsValue::from(*key)
                        );
                    }
                }
            ) { "+" }
            button(
                disabled={
                    let state = use_context::<AppState>();
                    state.selection.with(|sel| sel.len() != 2)
                },
                on:click=|_| {
                    let state = use_context::<AppState>();
                    let args = state.selection.with(
                        |sel| {
                            let arg_vec: Vec<_> = sel.into_iter().collect();
                            (arg_vec[0].clone(), arg_vec[1].clone())
                        }
                    );
                    state.assembly.insert_constraint(Constraint {
                        args: args,
                        rep: 0.0
                    });
                    state.selection.update(|sel| sel.clear());
                    
                    /* DEBUG */
                    // print updated constraint list
                    console::log_1(&JsValue::from("constraints:"));
                    state.assembly.constraints.with(|csts| {
                        for (_, cst) in csts.into_iter() {
                            console::log_5(
                                &JsValue::from(" "),
                                &JsValue::from(cst.args.0),
                                &JsValue::from(cst.args.1),
                                &JsValue::from(":"),
                                &JsValue::from(cst.rep)
                            );
                        }
                    });
                }
            ) { "🔗" }
        }
    }
}