use itertools::Itertools;
use sycamore::{prelude::*, web::tags::div};
use web_sys::KeyboardEvent;

use crate::AppState;

#[component]
pub fn Outline() -> View {
    let state = use_context::<AppState>();
    
    // sort the elements alphabetically by ID
    let elements_sorted = create_memo(move ||
        state.assembly.elements
            .get_clone()
            .into_iter()
            .sorted_by_key(|elt| elt.id.clone())
            .collect()
    );
    
    view! {
        ul {
            Keyed(
                list=elements_sorted,
                view=|elt| {
                    let class = create_memo(move ||
                        if elt.selected.get() { "selected" } else { "" }
                    );
                    let label = elt.label.clone();
                    let rep_components = elt.rep.iter().map(|u| {
                        let u_coord = u.to_string().replace("-", "\u{2212}");
                        View::from(div().children(u_coord))
                    }).collect::<Vec<_>>();
                    view! {
                        /* [TO DO] switch to integer-valued parameters whenever
                        that becomes possible again */
                        li(
                            class=class.get(),
                            tabindex="0",
                            on:click=move |_| {
                                elt.selected.set_fn(|sel| !sel);
                            },
                            on:keydown=move |event: KeyboardEvent| {
                                if event.key() == "Enter" {
                                    elt.selected.set_fn(|sel| !sel);
                                    event.prevent_default();
                                }
                            }
                        ) {
                            div(class="elt-label") { (label) }
                            div(class="elt-rep") { (rep_components) }
                        }
                    }
                },
                key=|elt| elt.id.clone()
            )
        }
    }
}