<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import { Resume, ResumeComponent, ResumeComponentPlacement } from '@/types/resume';
import ResumeEditPanel from '@/components/resume/ResumeEditPanel.vue';
import ResumePreviewPanel from '@/components/resume/ResumePreviewPanel.vue';
import { ref } from 'vue';

const props = defineProps<{
    resume: Resume
}>();

const selectedComponent = ref<ResumeComponentPlacement | null>(null);

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: props.resume?.name ?? 'Sans titre',
        href: '/resumes/edit',
    },
];

function changeSelectedComponent(newComponent: ResumeComponentPlacement) {
    selectedComponent.value = newComponent;
    // Update the resume
    props.resume.components_placements! = props.resume.components_placements!.map(component =>
        component.id === newComponent.id ? newComponent : component
    );
}

console.log('Resume : ', props.resume);

</script>

<template>
    <Head title="Dashboard" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto">
            <ResumeEditPanel :resume="props.resume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
            <ResumePreviewPanel :resume="props.resume" :selected-component="selectedComponent" @selected-component-change="changeSelectedComponent" />
        </div>
    </AppLayout>
</template>
