<template>
  <div>
    <ClientOnly>
      <AppUploadProjectForm />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useHeaderStateStore } from '@/stores/headerStateStore';
import AppUploadProjectForm from '@/components/boards/project/UploadProjectForm.vue';

const headerStore = useHeaderStateStore();
const route = useRoute(); // Get current route information
const isCmsHeader = 'cms-upload-header';

onMounted(() => {
  if (headerStore.activeLayout !== isCmsHeader) {
    headerStore.setActiveLayout(isCmsHeader);
    console.log(`Layout set to '${isCmsHeader}' by: ${route.path}`);
  }
});

onBeforeRouteLeave((to, from, next) => {
  if (to.path && !to.path.startsWith('/cms/')) {
    headerStore.setActiveLayout('default');
    console.log(
      `Layout set to 'default' by: ${from.path} (navigating to non-${isCmsHeader} area: ${to.path})`
    );
  } else {
    console.log(
      `Staying in ${isCmsHeader} area or navigating to another ${isCmsHeader} page from: ${from.path}. Layout remains 'cms-upload-header'.`
    );
  }
  next();
});
</script>
