use lazy_static::lazy_static;
use perseus::prelude::*;
use sycamore::{prelude::*, rt::Event};

use crate::global_state::AppStateRx;

lazy_static! {
    pub static ref USER_ICON: Capsule<PerseusNodeType, ()> = get_capsule();
}

fn user_icon<G: Html>(cx: Scope, _props: ()) -> View<G> {
    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);

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

    #[cfg(client)]
    spawn_local_scoped(cx, async move {
        // Since logged in is set to false by default (on the first page load) we have to check
        if *global_state.logged_in.get() {
            return;
        }
        let status = api_scope_ref.is_authenticated().await.unwrap().status();
        if status == 200 {
            global_state.logged_in.set(true);
        } else {
            global_state.logged_in.set(false);
        }
    });

    #[cfg(client)]
    let logout = move |e: Event| {
        wasm_cookies::delete("token");
        global_state.logged_in.set(false);
    };

    #[cfg(engine)]
    let logout = move |_| {};

    view! { cx,
        (if *global_state.logged_in.get() {
            view! { cx,
                div(on:click=|_| navigate("/profile"), class="mx-1 hover:cursor-pointer", title="Login") {
                    // user profile icon
                    svg(xmlns="http://www.w3.org/2000/svg", fill="none", viewBox="0 0 24 24", stroke-width="1.5", stroke="currentColor", class="w-6 h-6") {
                        path(stroke-linecap="round", stroke-linejoin="round", d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z") {}
                    }
                }

                div(on:click=logout, class="mx-1 hover:cursor-pointer", title="Login") {
                    // logout icon
                    svg(xmlns="http://www.w3.org/2000/svg", width="24", height="24", viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", class="feather feather-log-out") {
                        path(d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"){}
                        polyline(points="16 17 21 12 16 7") {}
                        line(x1="21", y1="12", x2="9", y2="12") {}
                    }
                }

            }
        } else {
            view! { cx,
                div(on:click=|_| navigate("/login"), class="mx-1 hover:cursor-pointer", title="Login") {
                    // login icon
                    svg(xmlns="http://www.w3.org/2000/svg", width="24", height="24", viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", class="feather feather-log-in") {
                        path(d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4") {}
                        polyline(points="10 17 15 12 10 7") {}
                        line(x1="15", y1="12", x2="3", y2="12"){}
                    }
                }
            }
        })
    }
}

fn fallback<G: Html>(cx: Scope, _props: ()) -> View<G> {
    view! { cx,
        div(on:click=|_| navigate("/login"), class="mx-1 hover:cursor-pointer", title="Login") {
            // login icon
            svg(xmlns="http://www.w3.org/2000/svg", width="24", height="24", viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke-width="2", stroke-linecap="round", stroke-linejoin="round", class="feather feather-log-in") {
                path(d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4") {}
                polyline(points="10 17 15 12 10 7") {}
                line(x1="15", y1="12", x2="3", y2="12"){}
            }
        }
    }
}

pub fn get_capsule<G: Html>() -> Capsule<G, ()> {
    Capsule::build(Template::build("dark_mode_btn"))
        .fallback(fallback)
        .view(user_icon)
        .build()
}