<script setup lang="ts">
import ResumeComponentEdit from './ResumeComponentEdit.vue';
import ResumeComponentsList from './ResumeComponentsList.vue';
import ComponentsSelectionList from './ComponentsSelectionList.vue';
import { computed } from 'vue';
import { useResumesStore } from '@/stores/resume';
import { useShowComponentSelectionStore } from '@/stores/ui';

const resumeStore = useResumesStore();
const selectedComponent = resumeStore.currentSelectedResumePlacement;

const showComponentSelectionStore = useShowComponentSelectionStore();
const showComponentSelection = computed<boolean>(() => showComponentSelectionStore.showComponentSelection);
</script>

<template>
    <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
        <Transition mode="out-in" appear>
            <ResumeComponentEdit v-if="selectedComponent != null" :key="selectedComponent ? selectedComponent.id : 'form'" />
            <ComponentsSelectionList v-else-if="showComponentSelection" />
            <ResumeComponentsList v-else />
        </Transition>
    </div>
</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>
