<script setup lang="ts">
import { Resume, ResumeComponentPlacement } from '@/types/resume';
import { computed } from 'vue';
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { Link } from '@inertiajs/vue3';

const props = defineProps<{
    resume: Resume;
    selectedComponent: ResumeComponentPlacement | null;
}>();

const orderedComponentsPlacements = computed(() => {
    console.log('Ordered Components Placements:', props.resume.components_placements);
    return props.resume.components_placements ? [...props.resume.components_placements].sort((a, b) => a.order - b.order) : [];
});

const emit = defineEmits(['selected-component-change']);
</script>

<template>
    <SidebarGroup class="w-full p-0">
        <SidebarGroupLabel>Composants du CV</SidebarGroupLabel>
        <SidebarMenu>
            <SidebarMenuItem v-for="component in orderedComponentsPlacements" :key="component.id">
                <SidebarMenuButton as-child class="cursor-pointer" :tooltip="component.component_data?.component?.name">
                    <div @click="emit('selected-component-change', component)">
                        <span>{{ component.component_data?.component?.name }}</span>
                    </div>
                </SidebarMenuButton>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarGroup>
</template>
