<script>
  import { page } from "$app/stores";
  import LL from "$i18n/i18n-svelte";
  import {
    mdiAccountMusic,
    mdiAccountMusicOutline,
    mdiAlbum,
    mdiHome,
    mdiHomeOutline,
    mdiMusicNote,
    mdiMusicNoteOutline,
    mdiPlus,
  } from "@mdi/js";

  import { iconAlbumOutline, iconSearch, iconSearchFilled } from "$lib/util/icons";
  import { userPlaylists } from "$lib/util/testdata";

  import NavbarItemLarge from "./NavbarItemLarge.svelte";
  import NavbarItemSmall from "./NavbarItemSmall.svelte";
  import CurrentCover from "$lib/components/player/CurrentCover.svelte";
  import IconButton from "$lib/components/ui/IconButton.svelte";
  import { linkUrl, pageMatchesLink, playlistLink } from "$lib/util/functions";
</script>

<div class="flex flex-col h-full">
  <ul class="menu menu-compact flex flex-col p-1">
    <NavbarItemLarge
      title={$LL.home()}
      icon={mdiHomeOutline}
      iconActive={mdiHome}
      href="/"
    />
    <NavbarItemLarge
      title={$LL.search()}
      icon={iconSearch}
      iconActive={iconSearchFilled}
      href="/search"
    />
    <NavbarItemLarge
      title={$LL.artists()}
      icon={mdiAccountMusicOutline}
      iconActive={mdiAccountMusic}
      href="/artist"
    />
    <NavbarItemLarge
      title={$LL.albums()}
      icon={iconAlbumOutline}
      iconActive={mdiAlbum}
      href="/album"
    />
    <NavbarItemLarge
      title={$LL.tracks()}
      icon={mdiMusicNoteOutline}
      iconActive={mdiMusicNote}
      href="/tracks"
    />
  </ul>

  <div class="flex pl-5 pr-1 mt-1">
    <a
      href="/playlist"
      class="flex-1 text-sm text-base-content text-opacity-40 font-semibold"
      >{$LL.playlists()}</a
    >
    <IconButton path={mdiPlus} size="xs" ariaLabel={$LL.playlist_new()} />
  </div>

  <div class="flex flex-1 min-h-0 mb-2">
    <div class="flex-1 overflow-y-scroll">
      <ul>
        {#each userPlaylists as playlist}
          {@const link = playlistLink(playlist)}
          <NavbarItemSmall
            title={link.title}
            href={linkUrl(link)}
            active={pageMatchesLink($page, link)}
          />
        {/each}
      </ul>
    </div>
  </div>

  <CurrentCover isLarge />
</div>
