<template>
    <Transition
      :enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
      :leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
    >
        <div v-if="!loading && contentType != ''">
            <div class="content-wrapper">
                <ModaleHeader
                    :contentType="contentType"
                    :content="content"
                    :couleur="content.couleur || brandColor" />
                <main>
                    <div v-for="partie in content.parties" class="partie">
                        <ModaleCarteSensible
                            v-if="partie.type === 'carte_sensible'"
                            :partie="partie" />
                        <ModaleTitreTexte
                            v-if="partie.type === 'titre_texte'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleChiffresCles
                            v-if="partie.type === 'chiffres_cles'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleDiaporama
                            v-if="partie.type === 'diaporama'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleEntretien
                            v-if="partie.type === 'entretien'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleExergue
                            v-if="partie.type === 'exergue'"
                            :partie="partie"
                            :couleur="content.couleur || brandColor" />
                        <ModaleVideos
                            v-if="partie.type === 'video'"
                            :partie="partie" />
                    </div>
                    <EquipeContent
                        v-if="contentType === 'gouvernance'"
                        :content="content"
                        :couleur="brandColor" />
                    <PartenairesContent
                        v-if="contentType === 'partenaire'"
                        :content="content" />
                    <CentreDeRessource
                      v-if="contentType === 'ressource'"
                      :content="content"
                      :couleur="brandColor" />
                </main>
                <PiecesJointes
                  :content="content"
                  :couleur="content.couleur || brandColor" />
                <ModaleFooter
                  :contentType="contentType"
                  :content="content"
                  :couleur="content.couleur || brandColor" />
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { watch, onMounted } from 'vue';

import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/map';

import ModaleHeader from './components/ModaleHeader.vue';
import ModaleFooter from './components/ModaleFooter.vue';
import EquipeContent from './components/EquipeContent.vue';
import PartenairesContent from './components/PartenairesContent.vue';
import CentreDeRessource from './components/CentreDeRessource.vue';
import PiecesJointes from './components/PiecesJointes.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';

const store = useContentStore();
const mapState = useMapStore();

const {
    contentType,
    content,
    loading,
    error,
} = storeToRefs(store);

const { defaultMapCenter, animationDuration, animationsAreEnabled } = storeToRefs(mapState);

let isModaleEtape, wasModaleEtape;

const brandColor = "#80c8bf";

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

const handleMapMovement = () => {
  watch(
    () => loading.value,
    () => {
        if (!loading.value) {
          console.log('loading done');
          isModaleEtape = contentType.value === 'etape';

          // Define helper functions in variables
          const disableModaleTransition = () => {
            document.documentElement.style.setProperty('margin-top', '0');
            document.documentElement.style.setProperty('transition', 'none');
          }
          const setModaleTransition = (enterDelay) => {
            document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
          };

          const zoomToContentPlace = () => {
            mapState.zoomToPlace(
              content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
              content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
            );
          };

          if (animationsAreEnabled.value) {

            if (isModaleEtape) {
              if (!wasModaleEtape) {
                // national -> détail
                setModaleTransition(animationDuration.value);
                zoomToContentPlace();
              } else {
                // détail -> détail
                setModaleTransition(animationDuration.value);
                zoomToContentPlace();
              }
            } else {
              if (wasModaleEtape) {
                // détail -> national
                setModaleTransition(animationDuration.value);
                mapState.resetMap();
              } else {
                // national -> national
                setModaleTransition(0);
              }
            }
          } else {
            if (isModaleEtape) {
              zoomToContentPlace();
            } else {
              mapState.resetMap();
            }
            disableModaleTransition();
          }

          scrollTo(0, 0);

          wasModaleEtape = isModaleEtape;
        }
    },
  );
};

onMounted(() => {
  console.log('modale mounted');
  isModaleEtape = contentType.value === 'etape';
  wasModaleEtape = isModaleEtape;
  handleColorChange();
  handleMapMovement();
});
</script>

<style scoped scss>
.v-enter-active {
  transition: margin-top 0.5s ease-out var(--modale-enter-delay);
}

.v-leave-active {
  transition: margin-top 0.5s ease-in;
}

.v-enter-from,
.v-leave-to {
  margin-top: 150vh;
}

.v-enter-to,
.v-leave-from {
  margin-top: 0vh;
}

/* This class will disable transitions */
.no-transition {
  margin-top: 0 !important;
  transition: none !important;
}
</style>
