<template>
    <Transition>
        <div v-if="isEtapeValid || isPageValid">
            <div class="content-wrapper">
                <ModaleHeader 
                    :content="etape.title ? etape : page"
                    :couleur="etape.couleur || brandColor" />
                <main>
                    <div v-for="partie in etape.parties || page.parties" class="partie">
                        <ModaleCarteSensible 
                            v-if="partie.type === 'carte_sensible'" 
                            :partie="partie" />
                        <ModaleTitreTexte
                            v-if="partie.type === 'titre_texte'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleChiffresCles
                            v-if="partie.type === 'chiffres_cles'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleDiaporama
                            v-if="partie.type === 'diaporama'"
                            :partie="partie" />
                        <ModaleEntretien
                            v-if="partie.type === 'entretien'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleExergue
                            v-if="partie.type === 'exergue'"
                            :partie="partie"
                            :couleur="etape.couleur || brandColor" />
                        <ModaleVideos
                            v-if="partie.type === 'video'"
                            :partie="partie" />
                    </div>
                </main>
                <ModaleFooter
                    :content="etape || page"
                    :couleur="etape.couleur || brandColor" />
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { useRoute, useRouter } from 'vue-router';

import ModaleHeader from './components/ModaleHeader.vue';
import ModaleFooter from './components/ModaleFooter.vue';

import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
import ModaleChiffresCles from './components/parties/ModaleChiffresCles.vue';
import ModaleDiaporama from './components/parties/ModaleDiaporama.vue';
import ModaleEntretien from './components/parties/ModaleEntretien.vue';
import ModaleExergue from './components/parties/ModaleExergue.vue';
import ModaleVideos from './components/parties/ModaleVideos.vue';

import { useUtils } from './composables/useUtils';
const { isObjectEmpty, scrollTop } = useUtils();

const router = useRouter();
const store = useContentStore();
const route = useRoute();

const { loading, error, href, etape, page } = storeToRefs(store);

const isEtapeValid = computed(() => !error.value && !loading.value && etape.value && !isObjectEmpty(etape.value));
const isPageValid = computed(() => !error.value && !loading.value && page.value && !isObjectEmpty(page.value));

const brandColor = "#80c8bf";

let isProgrammaticNavigation = false;

const handleRouteChange = () => {
  watch(
    () => route.params.id,
    (newId) => {
      if (isProgrammaticNavigation) {
        isProgrammaticNavigation = false;
        return;
      }

      if (!newId) {
        store.emptyAll();
      } else {
        store.fetchEtapeData(newId);
        if (!etape.value?.data) {
          store.fetchStaticData(newId);
        }
        scrollTop();
      }
    },
    { immediate: true }
  );
};

const handleColorChange = () => {
  watch(
    () => href.value,
    () => {
        document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur || brandColor);
    }
  );
};

const handleHrefChange = () => {
  watch(
    () => href.value,
    (newHref) => {
      const relativePath = newHref.split('.fr')[1];
      if (relativePath && relativePath !== '' && relativePath !== '/') {
        isProgrammaticNavigation = true;
        router.push(relativePath);
        scrollTop();
      }
    }
  );
};

onMounted(() => {
  handleRouteChange();
  handleColorChange();
  handleHrefChange();
});
</script>

<style scss>
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.v-leave-from {
  transform: translateY(0%);
  opacity: 1;
}
</style>