<script setup lang="ts">
import EditAudio from "@/components/icon/EditAudio.vue";
import PlaylistSelect from "@/components/internal/PlaylistSelect.vue";
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
} from "@/components/ui/sidebar";
import { Download, Edit, Settings, Upload } from "lucide-vue-next";

const items = [
    {
        title: "Edit track",
        url: "/edit",
        icon: Edit,
    },
    {
        title: "Import",
        url: "/import",
        icon: Upload,
    },
    {
        title: "Export",
        url: "/export",
        icon: Download,
    },
    {
        title: "Modify audio",
        url: "/modify",
        icon: EditAudio,
    }, {
        title: "Settings",
        url: "/settings",
        icon: Settings,
    },
];

const route = useRoute()
</script>

<template>
    <Sidebar collapsible="icon">
        <SidebarHeader>
            <PlaylistSelect />
        </SidebarHeader>
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupContent>
                    <SidebarMenu class="group-data-[collapsible=icon]:p-2">
                        <SidebarMenuItem v-for="item in items" :key="item.title">
                            <SidebarMenuButton asChild :is-active="route.path === item.url">
                                <a :href="item.url">
                                    <component :is="item.icon" />
                                    <span>{{ item.title }}</span>
                                </a>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
    </Sidebar>
</template>
