<script lang="ts">
	import { page } from '$app/stores';
	import * as Sidebar from '$lib/components/ui/sidebar';
	import Home from 'virtual:icons/lucide/home';
	import Library from 'virtual:icons/lucide/library';
	import ListMusic from 'virtual:icons/lucide/list-music';
	import Music2 from 'virtual:icons/lucide/music-2';
	import Settings from 'virtual:icons/lucide/settings';
	import CirclePlus from 'virtual:icons/lucide/circle-plus';
	import { cn } from '$lib/utils';
	import CreatePlaylistDialog from './CreatePlaylistDialog.svelte';
	import { getLibraryState } from '$lib/library.svelte';
	import { getPlayerState } from '$lib/player.svelte';

	const library = getLibraryState();
	const player = getPlayerState();
</script>

<Sidebar.Root collapsible="icon">
	<Sidebar.Header>
		<Sidebar.Menu>
			<Sidebar.MenuItem>
				<Sidebar.MenuButton isActive={$page.url.pathname === '/'} class="transition-all">
					{#snippet tooltipContent()}
						Home
					{/snippet}
					{#snippet child({ props })}
						<a href="/" {...props}>
							<Home />
							<span>Home</span>
						</a>
					{/snippet}
				</Sidebar.MenuButton>
			</Sidebar.MenuItem>
		</Sidebar.Menu>
	</Sidebar.Header>
	<Sidebar.Content>
		<Sidebar.Group>
			<Sidebar.GroupLabel>Library</Sidebar.GroupLabel>
			<Sidebar.Menu>
				<Sidebar.MenuItem>
					<Sidebar.MenuButton isActive={$page.url.pathname === '/tracks'} class="transition-all">
						{#snippet tooltipContent()}
							Tracks
						{/snippet}
						{#snippet child({ props })}
							<a href="/tracks" {...props}>
								<Music2 />
								<span>Tracks</span>
							</a>
						{/snippet}
					</Sidebar.MenuButton>
				</Sidebar.MenuItem>
				<Sidebar.MenuItem>
					<Sidebar.MenuButton isActive={$page.url.pathname === '/albums'} class="transition-all">
						{#snippet tooltipContent()}
							Albums
						{/snippet}
						{#snippet child({ props })}
							<a href="/albums" {...props}>
								<Library />
								<span>Albums</span>
							</a>
						{/snippet}
					</Sidebar.MenuButton>
				</Sidebar.MenuItem>
				<Sidebar.MenuItem>
					<Sidebar.MenuButton isActive={$page.url.pathname === '/playlists'} class="transition-all">
						{#snippet tooltipContent()}
							Playlists
						{/snippet}
						{#snippet child({ props })}
							<a href="/playlists" {...props}>
								<ListMusic />
								<span>Playlists</span>
							</a>
						{/snippet}
					</Sidebar.MenuButton>
					<Sidebar.MenuSub>
						<Sidebar.MenuSubItem>
							<Sidebar.MenuSubButton class="cursor-pointer">
								{#snippet child({ props })}
									<CreatePlaylistDialog class={cn(props.class ?? '', 'w-full')}>
										<CirclePlus class="!text-inherit" />
										<span>Create Playlist</span>
									</CreatePlaylistDialog>
								{/snippet}
							</Sidebar.MenuSubButton>
						</Sidebar.MenuSubItem>
						{#each library.playlists as [_, playlist]}
							{@const playlistLocation = `/playlists/${playlist.id}`}
							<Sidebar.MenuSubItem>
								<Sidebar.MenuSubButton
									class="cursor-pointer"
									isActive={$page.url.pathname === playlistLocation}
									href={playlistLocation}
									ondblclick={() => player.playPlaylist({ id: playlist.id }, fetch)}
								>
									{playlist.name}
								</Sidebar.MenuSubButton>
							</Sidebar.MenuSubItem>
						{/each}
					</Sidebar.MenuSub>
				</Sidebar.MenuItem>
			</Sidebar.Menu>
		</Sidebar.Group>
	</Sidebar.Content>
	<Sidebar.Footer>
		<Sidebar.Menu>
			<Sidebar.MenuItem>
				<Sidebar.MenuButton isActive={$page.url.pathname === '/settings'} class="transition-all">
					{#snippet tooltipContent()}
						Settings
					{/snippet}
					{#snippet child({ props })}
						<a href="/settings" {...props}>
							<Settings />
							<span>Settings</span>
						</a>
					{/snippet}
				</Sidebar.MenuButton>
			</Sidebar.MenuItem>
		</Sidebar.Menu>
	</Sidebar.Footer>
</Sidebar.Root>
