maybe_clean_form.rs

use seed_hooks::*;
use seed::{prelude::*,*};
use crate::Msg;
use seed_style::*;
use seed_style::px;

//  Struct to refer to the form data as a whole
//  Could also include configuraiton or options
#[derive(Clone,Debug)]
struct FormData {
    name: Atom<String>,
    color: Atom<String>,
}

//  Convienience to get at the data or perhaps reset all the data.
impl FormData{
    pub fn name(&self) -> String {
        self.name.get()
    }
    pub fn color(&self) -> String{
        self.color.get()
    }

    pub fn reset(&self) -> (){
        self.color.delete();
        self.name.delete();
    }
}

// Atam to get the form_data struct from anywhere
#[atom]
fn form_data(id: Local) -> Atom<FormData> {
    FormData {
        name: name_field(id),
        color: color_field(id),
    }
}


// Individual field's data and respective UI
// ====================================
// First name:
#[atom]
fn name_field(id: Local) -> Atom<String> {
    "".to_string()
}

#[reaction]
fn name_field_ui<Ms:'static>(id: Local) -> Reaction<Node<Ms>>{
    let name = name_field(id).observe();
    div![
        label!["Name:"],
    input![
        s().b_color("gray").b_style_solid().b_width(px(2)),
        attrs!{At::Value => name}, name_field(id).on_input(|field,inp| *field = inp ) ]
    ]
}
// Now Color:
#[atom]
fn color_field(id: Local) -> Atom<String> {
    "".to_string()
}


#[reaction]
fn color_field_ui<Ms:'static>(id: Local) -> Reaction<Node<Ms>>{
    div![label!["Color:"],
            crate::observable_color_picker(  
            color_field(id).on_input(|field,inp| *field= inp)
        ).observe()
    ]
}


// UI for the form overall, everything observed.
#[reaction]
fn form_ui<Ms:'static>(id: Local) -> Reaction<Node<Ms>>{
    div![
        name_field_ui(id).observe(),   
        color_field_ui(id).observe(),
    ]
}


// Actual View
#[topo::nested]
pub fn view() -> Node<Msg> {
    let form_id = Local::new();
    let form_data = form_data(form_id).get();
    div![
        h1![s().font_weight_v900(), "Form Data"],
        p![format!("name: {}", form_data.name)],
        p![format!("color: {}", form_data.color)],
        h1![s().font_weight_v900(), "Form"],
        form_ui(form_id).get(),
   
    ]
}