<script lang="ts" setup>
import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
import { ChevronLeft } from 'lucide-vue-next';
import { onMounted, ref } from 'vue';
import Button from '../ui/button/Button.vue';
import { SidebarGroup, SidebarGroupLabel, SidebarMenu } from '@/components/ui/sidebar';
import { httpApi } from '@/lib/utils';
import ComponentsSelectionListItem from './ComponentsSelectionListItem.vue';
import { useShowComponentSelectionStore } from '@/stores/ui';
import { useResumesStore } from '@/stores/resume';

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

const showComponentSelectionStore = useShowComponentSelectionStore();

const components = ref<ResumeComponent[]>([]);

// Fetch the available components from the API or store
function fetchAvailableComponents() {
    httpApi<ResumeComponent[]>(route('resume-components.index'), {
        method: 'GET',
    }).then(response => {
        if (!response) {
            console.error('Failed to fetch components.');
            return;
        }
        components.value = response.data;
    });
}

onMounted(() => {
    fetchAvailableComponents();
});

async function addNewComponentToResume(component: ResumeComponent) {
    const newResume: Resume = { ...resume.value }; // Create a shallow copy of the current resume
    let newComponentPlacement: ResumeComponentPlacement | null = null;

    const { data, error } = await httpApi<ResumeComponentPlacement>(route('resume-component-placements.store'), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            component_id: component.id,
            resume_id: resume.value.id,
            order: (resume.value.components_placements?.length ?? 0) + 1,
        }),
    });
    if (error) {
        console.error('Error creating component placement: ', error);
        return;
    }
    newComponentPlacement = data!;

    console.debug("New component placement created: ", newComponentPlacement);

    newResume.components_placements!.push(newComponentPlacement!);

    resumeStore.setAndUpdateCurrentResume(newResume);
    resumeStore.setSelectedResumePlacementById(newComponentPlacement.id);
    showComponentSelectionStore.setShowComponentSelection(false);
}

</script>

<template>
    <div class="h-full w-full">
        <Button @click="showComponentSelectionStore.setShowComponentSelection(false);" variant="outline" size="icon" class="cursor-pointer"><ChevronLeft class="w-4 h-4" /></Button>
        <SidebarGroup class="w-full p-0">
            <SidebarGroupLabel>Composants disponibles</SidebarGroupLabel>
            <SidebarMenu>
                <ComponentsSelectionListItem
                    v-for="component in components"
                    :key="component.id"
                    :component="component"
                    @click="addNewComponentToResume(component)"
                />
            </SidebarMenu>
        </SidebarGroup>
    </div>
</template>
