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

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()
            .map(|(_, elt)| elt)
            .sorted_by_key(|elt| elt.id.clone())
            .collect()
    });
    
    view! {
        ul(
            on:click={
                let state = use_context::<AppState>();
                move |_| state.selection.update(|sel| sel.clear())
            }
        ) {
            Keyed(
                list=elements_sorted,
                view=|elt| {
                    let state = use_context::<AppState>();
                    let class = create_memo({
                        move || {
                            if state.selection.with(|sel| sel.contains(&elt.key)) {
                                "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 |event: MouseEvent| {
                                    if event.shift_key() {
                                        state.selection.update(|sel| {
                                            if !sel.remove(&elt.key) {
                                                sel.insert(elt.key);
                                            }
                                        });
                                    } else {
                                        state.selection.update(|sel| {
                                            sel.clear();
                                            sel.insert(elt.key);
                                        });
                                    }
                                    event.stop_propagation();
                                }
                            },
                            on:keydown={
                                move |event: KeyboardEvent| {
                                    if event.key() == "Enter" {
                                        if event.shift_key() {
                                            state.selection.update(|sel| {
                                                if !sel.remove(&elt.key) {
                                                    sel.insert(elt.key);
                                                }
                                            });
                                        } else {
                                            state.selection.update(|sel| {
                                                sel.clear();
                                                sel.insert(elt.key);
                                            });
                                        }
                                        event.prevent_default();
                                    }
                                }
                            }
                        ) {
                            div(class="elt-label") { (label) }
                            div(class="elt-rep") { (rep_components) }
                        }
                    }
                },
                key=|elt| elt.key
            )
        }
    }
}