<script setup lang="ts">
import { ChevronsUpDown, Download, Edit, Music4, Settings, Upload } from "lucide-vue-next"
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarHeader,
    SidebarRail,
} from "@/components/ui/sidebar"
import { useSidebar } from "@/components/ui/sidebar";
import EditAudio from "@/components/icon/EditAudio.vue";
import Frame from "@/components/ui/frame/Frame.vue";
import Select from "@/components/ui/select/Select.vue";
import SelectTrigger from "@/components/ui/select/SelectTrigger.vue";
import SelectContent from "@/components/ui/select/SelectContent.vue";
import SelectLabel from "@/components/ui/select/SelectLabel.vue";
import SelectSeparator from "@/components/ui/select/SelectSeparator.vue";
import SelectGroup from "@/components/ui/select/SelectGroup.vue";
import SelectItem from "@/components/ui/select/SelectItem.vue";
import SelectCustomTrigger from "@/components/ui/select/SelectCustomTrigger.vue";

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 {
    open,
} = useSidebar()
const route = useRoute()
</script>

<template>
    <Sidebar collapsible="icon">
        <SidebarHeader>
            <Select>
                <div v-if="open" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
                    <SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
                        <Frame borderRadius="round" background="primary" padding="dense" margin="none">
                            <Music4 class="text-primary-foreground" :size="24" />
                        </Frame>
                        <div class="overflow-hidden text-start">
                            <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>
                    </SelectCustomTrigger>
                </div>
                <div v-if="!open">
                    <div class="flex items-center">
                        <SelectCustomTrigger as-child>
                            <Frame borderRadius="round" background="primary" padding="dense" margin="none">
                                <Music4 class="text-primary-foreground" :size="24" />
                            </Frame>
                        </SelectCustomTrigger>
                    </div>
                </div>
                <SelectContent class="w-full">
                    <SelectLabel>Playlists</SelectLabel>
                    <SelectSeparator />
                    <SelectGroup>
                        <SelectItem value="test">
                            <span>Test</span>
                        </SelectItem>
                        <SelectItem value="second">
                            <span>Second</span>
                        </SelectItem>
                        <SelectItem value="third">
                            <span>Third</span>
                        </SelectItem>
                        <SelectItem value="fourth">
                            <span>Fourth</span>
                        </SelectItem>
                    </SelectGroup>
                </SelectContent>
            </Select>
        </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>
