<script setup lang="ts">
import { Calendar, ChevronsUpDown, Home, Inbox, Music2, Music4, Search, Settings } from "lucide-vue-next"
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarHeader,
    SidebarRail,
} from "@/components/ui/sidebar"
import Container from "@/components/ui/container/Container.vue";
import { useSidebar } from "@/components/ui/sidebar";

const items = [
    {
        title: "Home",
        url: "#",
        icon: Home,
    },
    {
        title: "Inbox",
        url: "#",
        icon: Inbox,
    },
    {
        title: "Calendar",
        url: "#",
        icon: Calendar,
    },
    {
        title: "Search",
        url: "#",
        icon: Search,
    },
    {
        title: "Settings",
        url: "#",
        icon: Settings,
    },
];

const {
    open,
    openMobile,
} = useSidebar()
</script>

<template>
    <Sidebar collapsible="icon">
        <SidebarHeader>
            <div v-if="open">
                <div class="flex p-2 gap-2 items-center">
                    <Container borderRadius="round" background="primary" padding="dense" margin="none">
                        <Music4 class="text-primary-foreground" :size="24" />
                    </Container>
                    <div class="overflow-hidden">
                        <h4 class="text-xl font-semibold tracking-tight truncate">
                            My playlist
                        </h4>
                        <p class="text-sm text-muted-foreground">
                            11 track(s)
                        </p>
                    </div>
                    <div class="ml-auto">
                        <ChevronsUpDown />
                    </div>
                </div>
            </div>
            <div v-if="!open">
                <div class="flex items-center">
                    <Container borderRadius="round" background="primary" padding="dense" margin="none">
                        <Music4 class="text-primary-foreground" :size="24" />
                    </Container>
                </div>
            </div>
        </SidebarHeader>
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupContent>
                    <SidebarMenu class="group-data-[collapsible=icon]:p-1">
                        <SidebarMenuItem v-for="item in items" :key="item.title">
                            <SidebarMenuButton asChild>
                                <a :href="item.url">
                                    <div class="text-[1.5rem]">
                                        <component :is="item.icon" />
                                    </div>
                                    <span>{{ item.title }}</span>
                                </a>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
    </Sidebar>
</template>
