<script>
    import cookie from "js-cookie";
    import { page, navigating } from "$app/stores";
    import { onMount } from "svelte";

    let theme = localStorage.getItem("theme") || "";
    let user = $page.data.user;
    let breadcrumb = [];
    let paths = {
        "/staff/patients": "Diagnosa Pasien",
        "/staff/symptoms": "Gejala Klinis",
        "/staff/diseases": "Penyakit",
        "/staff/rules": "Relasi Gejala & Penyakit",
        "/admin/patients": "Daftar Pasien",
        "/admin/users": "Managemen Pengguna",
    };

    $: if ($navigating) {
        breadcrumb = [paths[$page.url.pathname.split("/").slice(0, 3).join("/")]];
    }

    onMount(() => {
        breadcrumb = [paths[$page.url.pathname.split("/").slice(0, 3).join("/")]];
    });
</script>

<header class="navbar navbar-expand-md d-print-none d-none d-lg-block shadow-none">
    <div class="container-xl">
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbar-menu"
            aria-controls="navbar-menu"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"></div> -->
        <div class="">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href={`/${$page.data.user.role}`}>Beranda</a></li>
                    {#if breadcrumb[0]}
                        {#each breadcrumb as crumb}
                            <li class="breadcrumb-item active" aria-current="page">{crumb}</li>
                        {/each}
                    {/if}
                </ol>
            </nav>
        </div>
        <div class="navbar-nav flex-row order-md-last">
            <div class="d-none d-md-flex">
                <div class="nav-item">
                    <a
                        href={"#"}
                        class="nav-link px-0"
                        title="Enable dark mode"
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        aria-label="Theme Toggle"
                        on:click|preventDefault={() => {
                            theme = !theme ? "dark" : theme === "dark" ? "light" : "dark";
                            const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
                                ? "dark"
                                : "light";

                            document?.querySelector("html")?.setAttribute("data-bs-theme", theme ? theme : isDarkMode);
                            localStorage[theme ? "setItem" : "removeItem"]("theme", theme);
                        }}
                    >
                        <i class="ti {!theme ? 'ti-sun' : theme === 'dark' ? 'ti-moon' : 'ti-sun'}"></i>
                    </a>
                </div>
            </div>
            <div class="nav-item dropdown ms-3">
                <a href={"#"} class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="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">Documentation</a>
                    <a href="/" class="dropdown-item">Settings</a>
                    <div class="dropdown-divider"></div>
                    <a
                        href={"#"}
                        class="dropdown-item"
                        on:click={() => {
                            cookie.remove("session");
                            window.location.href = "/login";
                        }}>Logout</a
                    >
                </div>
            </div>
        </div>
    </div>
</header>
