<script setup lang="ts">
import { ResumeComponentPlacement } from '@/types/resume';
import { computed } from 'vue';
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import ResumeComponentsListItem from './ResumeComponentsListItem.vue';
import Button from '@/components/ui/button/Button.vue';
import { Plus } from 'lucide-vue-next';
import { useResumesStore } from '@/stores/resume';
import { useShowComponentSelectionStore } from '@/stores/ui';

const resumeStore = useResumesStore();
const resume = resumeStore.currentResume;

const showComponentSelectionStore = useShowComponentSelectionStore();

const orderedComponentsPlacements = computed(() => {
    if (!resume.value) return [];
    return resume.value.components_placements ? [...resume.value.components_placements].sort((a, b) => a.order - b.order) : [];
});

function findComponentPlacementIndexById(id: number) {
    return resumeStore.currentResume?.value!.components_placements!.findIndex(cp => cp.id === id) ?? -1;
}


function moveComponent(componentPlacement: ResumeComponentPlacement, direction: 1 | -1) {
    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
    if (placementIndex === -1) return;
    const newIndex = placementIndex + direction;
    resumeStore.swapComponentsPlacementsOrder(placementIndex, newIndex);
}

function unlinkComponentData(componentPlacement: ResumeComponentPlacement) {
    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
    if (placementIndex === -1) return;
    resumeStore.unlinkComponentPlacement(placementIndex);
}

function deleteComponent(componentPlacement: ResumeComponentPlacement) {
    const placementIndex = findComponentPlacementIndexById(componentPlacement.id);
    if (placementIndex === -1) return;
    resumeStore.deleteComponentPlacement(placementIndex);
}
</script>

<template>
    <SidebarGroup class="w-full p-0">
        <SidebarGroupLabel>Composants du CV</SidebarGroupLabel>
        <SidebarMenu>
            <ResumeComponentsListItem
                v-for="componentPlacement in orderedComponentsPlacements"
                :key="componentPlacement.id"
                :component-placement="componentPlacement"
                @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)"

                @moved-up="moveComponent($event, -1)"
                @moved-down="moveComponent($event, 1)"
                @unlinked="unlinkComponentData($event)"
                @removed="deleteComponent($event)"
                />
            <SidebarMenuItem>
                <SidebarMenuButton as-child class="cursor-pointer text-center" tooltip="Ajouter un composant">
                    <Button variant="secondary" size="sm" class="w-full" @click="showComponentSelectionStore.setShowComponentSelection(true)">
                        <Plus />Ajouter un composant
                    </Button>
                </SidebarMenuButton>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarGroup>
</template>
