<script lang="ts">
    import { page } from "$app/state";
    import favicon from "$lib/assets/favicon.svg";
    import "../app.css";

    const groups = [
        {
            name: "Calculator",
            path: "/calculator",
            links: [
                { name: "Configurations", path: "/configurations" },
                { name: "Datasets", path: "/datasets" },
            ],
        },
        {
            name: "Apparel",
            path: "/apparel",
            links: [
                { name: "Products", path: "/products" },
                { name: "Orders", path: "/orders" },
            ],
        },
        {
            name: "Activity",
            path: "/activity",
            links: [{ name: "Events", path: "/events" }],
        },
    ];

    let { children } = $props();
    let collapsed = $state(false);
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
</svelte:head>

<div class="drawer lg:drawer-open">
    <input id="sidebar" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content px-10 flex flex-col items-center">
        {@render children?.()}
    </div>
    <div class="drawer-side">
        <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"
        ></label>
        <div
            class={[
                "bg-base-200 min-h-full flex flex-col overflow-hidden transition-[width] duration-200",
                collapsed ? "w-0" : "w-72",
            ]}
        >
            <ul class="menu menu-lg text-base-content w-72 p-4">
                {#each groups as group}
                    <li>
                        <h2 class="menu-title">{group.name}</h2>
                        <ul>
                            {#each group.links as link}
                                {@const fullPath = group.path + link.path}
                                <li>
                                    <a
                                        class={{
                                            "menu-active":
                                                page.url.pathname === fullPath,
                                        }}
                                        href={fullPath}>{link.name}</a
                                    >
                                </li>
                            {/each}
                        </ul>
                    </li>
                {/each}
            </ul>
            <div class="flex justify-end p-2 mt-auto">
                <button
                    class="btn btn-ghost btn-sm btn-square"
                    title="Collapse sidebar"
                    aria-label="Collapse sidebar"
                    onclick={() => (collapsed = true)}
                >
                    <span class="text-lg leading-none">‹</span>
                </button>
            </div>
        </div>
    </div>
</div>

{#if collapsed}
    <button
        class="btn btn-ghost btn-sm btn-square fixed left-0 bottom-4 z-50 rounded-l-none border border-l-0 border-base-300 bg-base-200"
        title="Expand sidebar"
        aria-label="Expand sidebar"
        onclick={() => (collapsed = false)}
    >
        <span class="text-lg leading-none">›</span>
    </button>
{/if}
