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

use crate::AppState;

#[component]
pub fn Outline() -> View {
    // sort the elements alphabetically by ID
    let elements_sorted = create_memo(|| {
        let state = use_context::<AppState>();
        state.assembly.elements
            .get_clone()
            .into_iter()
            .sorted_by_key(|(id, _)| id.clone())
            .map(|(_, elt)| elt)
            .collect()
    });
    
    view! {
        ul {
            Keyed(
                list=elements_sorted,
                view=|elt| {
                    let state = use_context::<AppState>();
                    let class = create_memo({
                        let id = elt.id.clone();
                        move || {
                            if state.selection.with(|sel| sel.contains(&id)) {
                                "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={
                                let id = elt.id.clone();
                                move |_| {
                                    state.selection.update(|sel| {
                                        if !sel.remove(&id) {
                                            sel.insert(id.clone());
                                        }
                                    });
                                }
                            },
                            on:keydown={
                                let id = elt.id.clone();
                                move |event: KeyboardEvent| {
                                    if event.key() == "Enter" {
                                        state.selection.update(|sel| {
                                            if !sel.remove(&id) {
                                                sel.insert(id.clone());
                                            }
                                        });
                                        event.prevent_default();
                                    }
                                }
                            }
                        ) {
                            div(class="elt-label") { (label) }
                            div(class="elt-rep") { (rep_components) }
                        }
                    }
                },
                key=|elt| elt.id.clone()
            )
        }
    }
}