use crate::{ entities::DashboardStoreFields, prelude::* };
use chrono::TimeDelta;
use leptos::{ logging, prelude::* };

#[component]
pub fn Header () -> impl IntoView {
    let state = expect_context::<Context>();
    let campaign = state.campaign();
    let date = state.date();
    let session = state.session();
    let image = state.campaign_image();

    let adjust_day = move |adjustment: i64| date.update(|d| {
        *d = d.checked_add_signed(TimeDelta::days(adjustment)).unwrap();
    });

    let adjust_session = move |adjustment: isize| session.update(|s| {
        if let Some(new) = s.checked_add_signed(adjustment) {
            *s = new;
        }
    });

    view! {
        <header>
            <Show when=move || !image.get().is_empty()>
                <div class="campaign-image">
                    <img src=image.get()/>
                </div>
            </Show>
            <section>
                <h5 class="version">aex v{env!("CARGO_PKG_VERSION")} by mk</h5>
                <input id="campaign-name" type="text" class="header-input header-input-1 campaign-name" bind:value=campaign/>
                <div class="game-date">
                    <h4>{move || format!("{}", date.get().format("%d/%m/%Y"))}</h4>
                    <button on:click=move |_| adjust_day(-1) title="Предыдущий день" class="adjust" id="date-back">"<"</button>
                    <button on:click=move |_| adjust_day( 1) title="Следующий день" class="adjust" id="date-forward">">"</button>
                </div>
                <div class="session-number">
                    <h4>Сессия #{move || format!("{}", session.get())}</h4>
                    <button on:click=move |_| adjust_session(-1) title="Предыдущая сессия" class="adjust" id="session-back">"<"</button>
                    <button on:click=move |_| adjust_session( 1) title="Следующая сессия" class="adjust" id="session-forward">">"</button>
                </div>
                <div class="controls">
                    <button>Save</button>
                    <button>Load</button>
                    <button>Clear</button>
                </div>
            </section>
        </header>
    }
}