<script>
import { RouterLink, RouterView } from 'vue-router'

import { mapState, mapActions } from 'pinia'
import { UserStore } from '@/stores/user'
import { ConcernementsStore } from '@/stores/concernements'

import StaticMenu from '@components/block/StaticMenu.vue'
import UserBlock from '@components/block/UserBlock.vue'
import SearchBlock from '@components/block/SearchBlock.vue'

import MapConcernements from '@components/MapConcernements.vue'
import ConcernementMapItem from '@components/ConcernementMapItem.vue'

export default {
  created () {
    this.loadContentTypeDefinition();
    this.loadConcernements()
  },
  mounted () {
    console.log('APP onMounted')
    this.checkUser()      
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['map_mode',
                                    'concernements',
                                    'concernementsByID',
                                    'allSuperpositions_byid',
                                    'opened_recit']),
    superposed_clones_concernements () {
      let clones = [];
      // loop through all superposition grouped by concernements couples
      for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
        // loop through all superpositions for one concernement couple and mark the first as NOT cloned and clone the others and mark them as cloned
        let i = 0;
        for(let [superposition_id, superposition] of Object.entries(superpositions)){
          i++
          if (i === 1) {
            // first superposition of the couple is not cloned
            this.allSuperpositions_byid[couple_id][superposition_id].cloned = false;
            continue;
          }
          // following superpositions of the couple generate concernement map_item clones
          // first concernement of the couple
          clones.push({
            concernement: this.concernementsByID[superposition[0].cid],
            superposition_id: superposition_id
          })
          // second concernement of the couple
          clones.push({
            concernement: this.concernementsByID[superposition[1].cid],
            superposition_id: superposition_id
          })

          this.allSuperpositions_byid[couple_id][superposition_id].cloned = true;
        }
      }
      return clones;
    }
  },
  methods: {
    ...mapActions(ConcernementsStore,['loadConcernements']),
    ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
    ...mapActions(UserStore,['checkUser']),
  },
  components: {
    MapConcernements,
    ConcernementMapItem,
    StaticMenu,
    UserBlock,
    SearchBlock
  }
}

</script>

<template>
  <header id="header">
    <div class="row title">
      <h1>
        <router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link>  
      </h1>

    </div>
    <div class="row top">
      <StaticMenu/>
      <SearchBlock/> 
      <UserBlock/>
    </div>
  </header>

  <div id="main-content">
    <MapConcernements>
      <template v-for="(concernement,index) in concernements">
        <ConcernementMapItem
          v-if="concernement.visible"
          :key="index"
          :concernement="concernement"
          :is_opened="concernement.opened"
          :active_revision="concernement.active_revision"
        />
      </template>
      <template v-if="map_mode === 'superposition'">
        <template v-for="(superposition,index) in superposed_clones_concernements">
          <ConcernementMapItem
            v-if="superposition.concernement.visible"
            :key="index"
            :concernement="superposition.concernement"
            :is_opened="superposition.concernement.opened"
            :active_revision="superposition.concernement.active_revision"
            :superposition_id="superposition.superposition_id"
          />
        </template>
      </template>
    </MapConcernements>
    <div id="content" :class="{'recit-opened':opened_recit}">
      <RouterView />
    </div>
  </div>

</template>

<style lang="scss" scoped>
</style>
