<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import { Resume } from '@/types/resume';
import { useResumesStore } from '@/stores/resume';
import ResumeEditPanel from '@/components/resume/ResumeEditPanel.vue';
import ResumePreviewPanel from '@/components/resume/ResumePreviewPanel.vue';
import { useShowComponentSelectionStore } from '@/stores/ui';

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

const resumeStore = useResumesStore();
resumeStore.setAndUpdateCurrentResumeWhenFetched(props.resume);

const showComponentSelectionStore = useShowComponentSelectionStore();
showComponentSelectionStore.setShowComponentSelection(false);

const resumeTitle = resumeStore.currentResumeName;

resumeStore.setSelectedResumePlacement(-1);

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: resumeTitle.value,
        href: '/resumes/edit',
    },
];

</script>

<template>
    <Head :title="resumeTitle" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto">
            <ResumeEditPanel />
            <ResumePreviewPanel />
        </div>
    </AppLayout>
</template>

<style lang="css" scoped>
    .v-enter-active,
    .v-leave-active {
    transition: opacity 0.3s ease;
    }

    .v-enter-from,
    .v-leave-to {
    opacity: 0;
    }
</style>
