<script>
    import clsx from "clsx";
    import { page } from "$app/stores";
    import { afterNavigate } from "$app/navigation";
    import { onMount } from "svelte";

    let pathname = "/";
    let user = $page.data.user;
    let menuOpen = false;
    let collapseInstance;

    afterNavigate((ctx) => {
        if (ctx.to) {
            pathname = ctx.to.url.pathname;
            menuOpen = false;
        }
    });

    onMount(() => {
        const sidebarMenu = document.getElementById("sidebar-menu");
        const bs = window.bootstrap || {};
        if (sidebarMenu && bs.Collapse) {
            collapseInstance = new bs.Collapse(sidebarMenu, {
                toggle: false,
            });
        }
    });

    afterNavigate(() => {
        pathname = window.location.pathname;
        if (collapseInstance) {
            collapseInstance.hide();
        }
        menuOpen = false;
    });

    const menus =
        user.role === "admin"
            ? [
                  {
                      name: "Beranda",
                      href: "/admin",
                      icon: "ti ti-home",
                  },
                  {
                      name: "Pasien & Diagnosa",
                      href: "/admin/patients",
                      icon: "ti ti-folder",
                  },
                  {
                      name: "Pengguna",
                      href: "/admin/users",
                      icon: "ti ti-user",
                  },
              ]
            : [
                  {
                      name: "Beranda",
                      href: "/staff",
                      icon: "ti ti-home",
                  },
                  {
                      name: "Diagnosa Pasien",
                      href: "/staff/patients",
                      icon: "ti ti-health-recognition",
                  },
                  {
                      name: "Gejala Klinis",
                      href: "/staff/symptoms",
                      icon: "ti ti-report-medical",
                  },
                  {
                      name: "Penyakit",
                      href: "/staff/diseases",
                      icon: "ti ti-vaccine",
                  },
                  {
                      name: "Relasi Gejala & Penyakit",
                      href: "/staff/rules",
                      icon: "ti ti-vector-bezier-arc",
                  },
              ];
</script>

<aside
    class="navbar navbar-vertical navbar-expand-lg shadow-none"
    data-bs-theme="dark"
    style="border-right: 1px solid #182336;"
>
    <div class="container-fluid">
        <button
            class="navbar-toggler"
            type="button"
            on:click={() => {
                if (collapseInstance) {
                    menuOpen ? collapseInstance.hide() : collapseInstance.show();
                }
                menuOpen = !menuOpen;
            }}
            aria-label="Toggle navigation"
        >
            <i class="ti" class:ti-x={menuOpen} class:ti-menu-2={!menuOpen}></i>
        </button>

        <div class="navbar-brand navbar-brand-autodark d-flex align-items-center gap-2">
            <div class="bg-primary rounded-circle p-2">
                <a href="/" aria-label="Brand Logo">
                    <img src="/img/logo.png" alt="logo" class="navbar-brand-image" style="height: 25px;" />
                </a>
            </div>
            <span class="navbar-brand-text text-primary">Balita <br /> Sehat</span>
        </div>
        <div class="navbar-nav flex-row d-lg-none">
            <div class="nav-item dropdown">
                <a
                    href={"#"}
                    class="nav-link d-flex lh-1 p-0 px-2"
                    data-bs-toggle="dropdown"
                    aria-label="Open user menu"
                >
                    <span
                        class="avatar avatar-sm"
                        style="background-image: url(https://ui-avatars.com/api/?name={user.username}&length=1&background=random)"
                    >
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    <a href="/" class="dropdown-item">Profile</a>
                    <a href="/" class="dropdown-item">Notifications</a>
                    <div class="dropdown-divider"></div>
                    <a href="/" class="dropdown-item">Settings</a>
                    <a href="/" class="dropdown-item">Logout</a>
                </div>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="sidebar-menu">
            <ul class="navbar-nav pt-lg-3">
                {#each menus as menu}
                    <li
                        class={clsx(
                            "nav-item",
                            menu.submenus && "dropdown",
                            menu.href === `/${$page.data.user.role}`
                                ? menu.href === pathname && "active"
                                : pathname.startsWith(menu.href) && "active",
                        )}
                    >
                        <a
                            href={menu.href}
                            class={clsx("nav-link", menu.submenus && "dropdown-toggle")}
                            data-bs-toggle={menu.submenus ? "dropdown" : ""}
                            data-bs-auto-close="false"
                            role="button"
                            aria-expanded="false"
                        >
                            <span class="nav-link-icon d-md-none d-lg-inline-block"><i class={menu.icon}></i></span>
                            <span class="nav-link-title">{menu.name}</span>
                        </a>
                        {#if menu.submenus}
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        {#each menu.submenus as submenu}
                                            {#if !submenu.submenus}
                                                <a class="dropdown-item" href={submenu.href}>
                                                    {submenu.name}
                                                    {#if submenu.hasBadge}
                                                        <span class="badge badge-sm bg-green-lt ms-auto">NEW</span>
                                                    {/if}
                                                </a>
                                            {:else}
                                                <div class="dropend">
                                                    <a
                                                        href={submenu.href}
                                                        class="dropdown-item dropdown-toggle"
                                                        data-bs-toggle="dropdown"
                                                        data-bs-auto-close="false"
                                                        role="button"
                                                        aria-expanded="false"
                                                    >
                                                        {submenu.name}
                                                    </a>
                                                    <div class="dropdown-menu">
                                                        {#each submenu.submenus as subSubmenu}
                                                            <a href={subSubmenu.href} class="dropdown-item">
                                                                {subSubmenu.name}
                                                                {#if subSubmenu.hasBadge}
                                                                    <span class="badge badge-sm bg-green-lt ms-auto">
                                                                        NEW
                                                                    </span>
                                                                {/if}
                                                            </a>
                                                        {/each}
                                                    </div>
                                                </div>
                                            {/if}
                                        {/each}
                                    </div>
                                </div>
                            </div>
                        {/if}
                    </li>
                {/each}
            </ul>
        </div>
    </div>
</aside>
