<script>

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

import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
import GQL from '@api/graphql-axios'
import EntiteFields from '@api/gql/entite.fragment.gql'

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiHeadphones } from '@mdi/js';

import TerrainDeVie from '@components/contents/TerrainDeVie.vue';
import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
import Doleancer from '@components/contents/Doleancer.vue';

export default {
  props: ['id', 'eid'],
  data(){
    return {
      entite: null,
      opened_besoin_id: null,
      headphones_path: mdiHeadphones
    }
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['map_mode']),
    ...mapState(ConcernementsStore,['opened_concernement']),
    // ...mapState(ConcernementsStore,['opened_entity_id']),
    ...mapState(ConcernementsStore,['concernements_loaded']),
    ...mapState(ConcernementsStore,['ct_concernement']),
    ...mapState(ConcernementsStore,['ct_entite']),
    ...mapState(ConcernementsStore,['ct_cercle_politique']),
    ...mapState(ConcernementsStore,['p_groupes_interets']),
    ...mapState(ConcernementsStore,['p_reception_et_traitement']),
    ...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
    ...mapState(ConcernementsStore,['p_reception_application_decision']),
    ...mapState(CommonStore,['hover_elmt']),
    display_concernement(){
      return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir'&& this.map_mode !== 'doleancer';
    }
  },
  created () {
    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
    
    // when we arrived directly to the url, load the entite
    // this.eid provided by route params
    if (!this.entity && this.eid) {
      this.openEntity();
    }
  },
  watch: {
    concernements_loaded: {
      handler (n, o){
        console.log(`watch concernements_loaded n: ${n}, opened_concernement:${this.opened_concernement}, id:${this.id}`);
        // when we arrived directly to the url then all concernement are loaded: do open the concernement
        if (!this.opened_concernement) {
          this.openCloseConcernements(this.id)
        }
   
      },
      deep: true
    },
    eid: {
      handler (n, o){
        if(n){
          this.openEntity()
        }else{
          this.entite = false;
          this.setOpenedEntityId(null);
        }
      },
      deep: true
    },
  },
  methods: {
    ...mapActions(ConcernementsStore,['openCloseConcernements']),
    ...mapActions(ConcernementsStore,['setOpenedEntityId']),
    ...mapActions(ConcernementsStore,['setMapMode']),
    openEntity(){
      this.setOpenedEntityId(parseInt(this.eid))
      this.loadEntite()
    },
    loadEntite(){
      const ast = gql`{
        entite (id: ${this.eid}) {
          ...EntiteFields
        }
      }
      ${EntiteFields}
      `
      console.log('ast', ast);
      GQL.post('', { query: print(ast) })
        .then(({data: { data: { entite }}}) => {
          console.log('load entite loaded', entite)
          this.entite = entite
        })
        .catch(error => {
          console.warn('Issue with load entite', error)
        })
    },
    onClickBesoin(id){
      console.log("onClickBesoin", id);
      this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
    },
    besoinClass(id){
      return this.opened_besoin_id === id ? "opened" : "";
    }
  },
  components: {
    SvgIcon,
    TerrainDeVie,
    PuissanceAgir,
    Doleancer
  }
}

</script>

<template>
  <section v-if="opened_concernement" class="concernement">
    <header v-if="concernements_loaded">
      <div class="pre-header">
        <!-- concernement -->
        <label 
        v-if="display_concernement"
        >
          {{ ct_concernement.title.description }}
        </label>
        <!-- entite -->
        <h3 v-if="entite">{{ entite.title }}</h3>
        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
      </div>
      <div class="concernement-cartouche">
        <h2 :class='{ faded: !display_concernement}'>{{ opened_concernement.title }}</h2>
        <nav class="icons">
          <ul>
            <li v-if="opened_concernement.has_recit" >
              <svg-icon type="mdi" :path="headphones_path"></svg-icon>
            </li>
            <li>
              <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
            </li>
            <li v-if="opened_concernement.has_puissancedagir" >
              <a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
            </li>
            <li v-if="opened_concernement.has_proximite" >
              <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
            </li>
            <li v-if="opened_concernement.has_superposition" >
              <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
            </li>
            <li v-if="opened_concernement.has_agissantes" >
              <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
            </li>
            <li v-if="opened_concernement.has_doleance" >
              <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
            </li>
          </ul>
        </nav>

      </div>
    </header>
    <!-- body -->
    <TerrainDeVie v-if="map_mode === 'terraindevie'" :id="id" :eid="eid" :entite="entite"/>
    <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
    <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
    
  </section>
</template>

<style lang="scss" scoped>

</style>
