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

#[component]
pub fn About () -> impl IntoView {
    let state = expect_context::<Context>();
    let player = state.player();

    let class = player.class();
    let level = player.level();
    let xp = player.xp();

    let adjust_level = move |adjustment: i8| level.update(|l| {
        if let Some(new) = l.checked_add_signed(adjustment) {
            *l = new;
        }
    });

    let adjust_xp = move |ev: Targeted<Event, HtmlInputElement>| {
        utils::adjust_checked(ev, xp);
    };

    view! {
        <div class="about">
            <div class="class">
                <input id="class" type="text" class="header-input" bind:value=class/>
            </div>
            <div class="level">
                {move || level.get()}
                <span> уровня</span>
            </div>
            <div class="level-adjust">
                <button title="Уменьшить уровень" on:click=move |_| adjust_level(-1)>-</button>
                <button title="Увеличить уровень" on:click=move |_| adjust_level( 1)>+</button>
            </div>
            <div class="xp">
                <input min=0 id="xp" type="number" class="header-input" on:input:target=move |e| adjust_xp(e) prop:value=move || xp.get() />
                <span> XP</span>
            </div>
        </div>
    }
}