use crate::prelude::*;
use leptos::prelude::*;

/// Spell slots for all nine levels: a row of clickable pips per level.
/// Clicking toggles a slot used/unused.
#[component]
pub fn SpellSlots () -> impl IntoView {
    let state = expect_context::<Context>();
    let player = state.player();

    let slots = player.spell_slots();

    // Toggles pip `slot_id` of `level` used/unused.
    let process_spell_slot_click = move |level: usize, slot_id: u8| {
        slots.update(|s| {
            let l = &mut s.0[level];
            if slot_id < l.used {
                l.used = slot_id;
            } else {
                l.used = slot_id + 1;
            }
        })
    };

    view! {
        <h6>spell slots/ячейки заклинаний:</h6>
        <div class="slots">
            <For
                each=move || slots.get().0.into_iter().enumerate()
                key=|(idx, ssl)| format!("{}-{}-{}", idx, ssl.used, ssl.total)
                let((index, level))
            >
                <div class=move || format!("slot-level slot-level-{}", index + 1)>
                    <span class="slot-level-title">{move || index + 1}</span>
                    <For each=move || 0..level.total key=|i| i.clone() let(slot)>
                        <div
                            class=move || format!("spell-slot {}", if slot < level.used { "used" } else { "" })
                            on:click=move |_| process_spell_slot_click(index, slot)
                        >
                        </div>
                    </For>
                </div>
            </For>
        </div>
    }
}