<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 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,['concernements']),
    ...mapState(ConcernementsStore,['concernementsByID']),
    ...mapState(ConcernementsStore,['opened'])
  },
  methods: {
    ...mapActions(ConcernementsStore,['loadConcernements']),
    ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
    ...mapActions(UserStore,['checkUser']),
  },
  components: {
    MapConcernements,
    ConcernementMapItem,
    StaticMenu,
    UserBlock
  }
}

</script>

<template>
  <header id="header">
    <h1 class="row">
      <router-link :to="{ name: 'home' }"><span class="title">Atlas</span> des cartes d'atterrissage</router-link>  
    </h1>
    <div class="row top">
      <StaticMenu/>
      <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"
        />
      </template>
    </MapConcernements>
    <div id="content">
      <RouterView />
    </div>
  </div>

</template>

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