use perseus::prelude::*;
use sycamore::prelude::*;

use crate::{
    api::types::transaction::{LatestTransaction, TransactionsAggregated},
    components::{
        main_content_container::MainContentContainer,
        paginated_data_table::{PaginatedTable, PaginatedTableStateRx},
        the_header::TheHeader,
    },
    global_state::AppStateRx,
};

fn index_page<G: Html>(cx: BoundedScope) -> View<G> {
    let reactor = Reactor::<G>::from_cx(cx);
    let global_state = reactor.get_global_state::<AppStateRx>(cx);

    let api = global_state.api.get();
    let api_scope_ref = create_ref(cx, api);

    let table_classes = create_ref(cx, "w-full".to_string());

    let route_ref = create_ref(cx, move |c, p, s| {
        api_scope_ref.get_latest_transactions(c, p, s)
    });
    let latest_transactions: PaginatedTableStateRx<LatestTransaction, _, _> =
        PaginatedTableStateRx {
            record_label: "transactions".to_owned(),
            route: route_ref,
            filter: Some("72".to_string()),
            table_class: table_classes,
        };

    let route_ref = create_ref(cx, move |c, p, s| {
        api_scope_ref.get_aggregated_transactions(c, p, s)
    });
    let table_transactions_month: PaginatedTableStateRx<TransactionsAggregated, _, _> =
        PaginatedTableStateRx {
            record_label: "companies".to_owned(),
            route: route_ref,
            filter: Some((24 * 30).to_string()),
            table_class: table_classes,
        };

    let dark_mode_class = create_memo(cx, || {
        if *global_state.dark_mode.get() {
            "dark"
        } else {
            ""
        }
    });

    view! {cx,
        main (class=format!("{} flex flex-1", dark_mode_class)) {
            div (class="flex-1 font-sans bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-100") {
                TheHeader()
                MainContentContainer(useless_prop=1) {
                    div(class="flex flex-wrap gap-4 justify-around") {
                        div (class="flex-grow") {
                            h1 (class="mb-1 text-center") {
                                "Latest transactions aggregated by nature"
                            }
                            PaginatedTable(latest_transactions)
                        }
                        div (class="flex-grow") {
                            h1 (class="mb-1 text-center") {
                                    "Most activity in the past 30 days"
                            }
                            PaginatedTable(table_transactions_month)
                        }
                    }
                }
            }
        }
    }
}

pub fn get_template<G: Html>() -> Template<G> {
    Template::build("index").head(head).view(index_page).build()
}

#[engine_only_fn]
fn head(cx: Scope) -> View<SsrNode> {
    view! {cx,
        title { "Fast Insiders" }
    }
}