<script lang="ts">
	import { getContext } from "svelte";
	import { getSidebarData } from "$lib/components/sidebar/modules";
	import NavMain from "./nav-main.svelte";
	import NavProjects from "./nav-projects.svelte";
	import NavUser from "./nav-user.svelte";
	import TeamSwitcher from "./team-switcher.svelte";
	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
	import type { ComponentProps } from "svelte";

	let {
		ref = $bindable(null),
		collapsible = "icon",
		...restProps
	}: ComponentProps<typeof Sidebar.Root> = $props();

	// Obtener datos del usuario desde el contexto (viene de Keycloak vía +layout.server.ts)
	const userData = getContext<any>('user');

	// Obtener datos del sidebar con traducciones
	const sidebarData = getSidebarData();

	// Combinar los datos estáticos del sidebar con los datos del usuario de Keycloak
	const data = $derived({
		...sidebarData,
		user: userData
			? {
					name: userData.name || userData.preferred_username || "",
					email: userData.email || "",
					avatar: userData.avatar_url || "/avatars/default.jpg",
			  }
			: sidebarData.user,
	});
</script>

<Sidebar.Root {collapsible} {...restProps}>
	<Sidebar.Header>
		<TeamSwitcher />
	</Sidebar.Header>
	<Sidebar.Content>
		<NavMain items={data.navMain} />
		<NavProjects projects={data.projects} />
	</Sidebar.Content>
	<Sidebar.Footer>
		<NavUser user={data.user} />
	</Sidebar.Footer>
	<Sidebar.Rail />
</Sidebar.Root>
