use perseus::prelude::*;
use sycamore::prelude::*;
use web_sys::Event;

use crate::{
    components::static_components::menu_button::MenuButtonSvg,
    global_state::AppStateRx,
    state_enums::{ContentState, LoginState},
};

cfg_if::cfg_if! {
    if #[cfg(client)] {
        use crate::{
            state_enums::OpenState,
        };
    }
}

#[derive(Prop)]
pub struct HeaderProps {
    pub content_state: ContentState,
}

// TODO update to have user preferences
#[component]
fn LinkList<G: Html>(cx: Scope) -> View<G> {
    // Get global state to get style info
    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);

    // TODO -> update to use inventory theme
    view! { cx,
        li {
            a (href = "inventory") {
                label (class = "swap") {
                    input (
                        type="radio",
                        name = "theme-dropdown",
                        class = "theme-controller",
                        value = (*global_state.style.theme.default.get()),
                    ) {}
                    p (class = (
                        if *global_state.style.theme.current.get() == *global_state.style.theme.default.get(){
                            "font-bold"
                        }
                        else {
                            ""
                        }
                    )){ "Inventory" }
                }
            }
        }
    }
}

#[component]
pub fn Header<G: Html>(cx: Scope, props: HeaderProps) -> View<G> {
    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);

    let handle_log_in = move |_event: Event| {
        #[cfg(client)]
        {
            spawn_local_scoped(cx, async move {
                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
                global_state.modals_open.login.set(OpenState::Open);
            });
        }
    };

    let handle_register = move |_event: Event| {
        #[cfg(client)]
        {
            spawn_local_scoped(cx, async move {
                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
                global_state.modals_open.register.set(OpenState::Open);
            });
        }
    };

    let handle_log_out = move |_event: Event| {
        #[cfg(client)]
        {
            spawn_local_scoped(cx, async move {
                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
                global_state.auth.handle_log_out();
            });
        }
    };

    view! { cx,
        header (class="navbar bg-base-100") {
            // Navigation
            div (class="navbar-start") {
                div (class="dropdown") {
                    div (tabindex="0", role="button", class="btn btn-ghost lg:hidden") { MenuButtonSvg {} }
                    ul (tabindex = "0", class = "menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" ) {
                        LinkList {}
                    }
                }
                ul (class="menu menu-horizontal px-1 hidden lg:flex") {
                    LinkList {}
                }
            }
            // Title
            div (class="navbar-center lg:flex") {
                (props.content_state.to_string())
            }
            // User buttons
            div (class="navbar-end") {
                (match *global_state.auth.state.get() {
                    LoginState::Authenticated => { view! { cx,
                        button(on:click = handle_log_out, class = "btn btn-primary mr-2") {
                            "Log out"
                        }
                    } },
                    LoginState::NotAuthenticated => { view! { cx,
                        button(on:click = handle_register, class = "btn btn-primary mr-2") {
                            "Register"
                        }
                        button(on:click = handle_log_in, class = "btn btn-secondary mr-2") {
                            "Log in"
                        }
                    } },
                    LoginState::Unknown => { view! { cx,
                        div (class = "px-5 py-2.5 me-2 mb-2") {
                            "Loading..."
                        }
                    } },
                })
            }
        }
    }
}