use std::rc::Rc;
use yew::prelude::*;
use yew_router::prelude::*;
use yewdux::prelude::*;

use crate::{routes, stores};

pub enum Msg {
    UpdateUser(Rc<stores::User>),
    BurgerClicked,
    Logout,
}

pub struct Navbar {
    user: Rc<stores::User>,
    user_dispatch: Dispatch<stores::User>,
    burger_active: bool,
}

impl Component for Navbar {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        let user_dispatch = Dispatch::subscribe(ctx.link().callback(Msg::UpdateUser));

        Self {
            user: user_dispatch.get(),
            user_dispatch,
            burger_active: false,
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::UpdateUser(x) => {
                self.user = x;

                true
            }
            Msg::BurgerClicked => {
                self.burger_active = !self.burger_active;

                true
            }
            Msg::Logout => {
                self.user_dispatch.set(stores::User(None));

                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <header>
                <nav
                    class={classes!("navbar", "is-primary")}
                    role="navigation"
                    aria-label="main navigation"
                >
                    <div class={classes!("navbar-brand")}>
                        <Link<routes::Route> to={routes::Route::Index} classes={classes!("navbar-item")}>
                            <strong>{ "Gitea Pages" }</strong>
                        </Link<routes::Route>>

                        <a
                            role="button"
                            onclick={ctx.link().callback(|_| Msg::BurgerClicked)}
                            class={classes!("navbar-burger")}
                            aria-label="menu"
                            aria-expandable="false"
                        >
                            <span aria-hidden="true" />
                            <span aria-hidden="true" />
                            <span aria-hidden="true" />
                        </a>
                    </div>

                    <div
                        class={classes!(
                            "navbar-menu",
                            "is-white",
                            if self.burger_active { Some("is-active") } else { None }
                        )}
                    >
                        <div class={classes!("navbar-end")}>
                            <a
                                href="https://git.dergrimm.net/dergrimm/gitea_pages"
                                target="_blank"
                                class={classes!("navbar-item")}
                            >
                                { "Info" }
                            </a>

                            <div class={classes!("navbar-item")}>
                                <div class={classes!("buttons")}>
                                    if self.user.logged_in() {
                                        <button
                                            onclick={ctx.link().callback(|_| Msg::Logout)}
                                            class={classes!("button")}
                                        >
                                            <span class={classes!("icon", "is-small")}>
                                                <i class={classes!("fa-solid", "fa-right-from-bracket")} />
                                            </span>
                                            <span>{ "Logout" }</span>
                                        </button>
                                    } else {
                                        <Link<routes::Route> to={routes::Route::Login} classes={classes!("button")}>
                                            <span class={classes!("icon", "is-small")}>
                                                <i class={classes!("fa-solid", "fa-right-to-bracket")} />
                                            </span>
                                            <span>{ "Login" }</span>
                                        </Link<routes::Route>>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </header>
        }
    }
}