<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.loadConcernements()
  },
  mounted () {
    console.log('APP onMounted')
    this.checkUser()      
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['concernements'])
  },
  methods: {
    ...mapActions(ConcernementsStore,['loadConcernements']),
    ...mapActions(UserStore,['checkUser'])
  },
  components: {
    MapConcernements,
    ConcernementMapItem,
    StaticMenu,
    UserBlock
  }
}

</script>

<template>
  <header id="header">
    <div class="row top">
      <h1>
        <router-link :to="{ name: 'home' }">Où atterrir</router-link>  
      </h1>
      <!-- <StaticMenu/> -->
      <UserBlock/>
    </div>
  </header>

  <div id="main-content">
    <MapConcernements v-if="isloggedin">
      <ConcernementMapItem
        v-for="concernement in concernements"
        :key="concernement.id"
        :concernement="concernement"
      />
      <!-- <ConcernementMapItem
        :concernement="concernements[0]"
      /> -->
    </MapConcernements>
    <div id="content" class="row">
      <RouterView />
    </div>
  </div>

</template>

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