<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
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 { mdiArrowUp } 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: {
  //   cid: {
  //     type: Number
  //   },
  //   eid: {
  //     type: Number
  //   } 
  // },
  props: ['cid', 'eid'],
  data(){
    return {
      // entite: null,
      proximite_cid_eid: null,
      superposition_cluster_index: null,
      superposition: null,
      opened_besoin_id: null,
      arrowup_path: mdiArrowUp
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['map_mode',
                                    'opened_concernement',
                                    'concernements_loaded',
                                    'allSuperpositions_clustered']),
    ...mapState(CommonStore,['cartouch_width']),
    // 
    main_cid_eid () {
      let r = {
        cid: this.cid,
        eid: null
      };

      if (this.eid) {
        r.eid = this.eid
      } else if (this.map_mode === "superposition" && this.superposition) {
        this.superposition.forEach(s => {
          // routeview param -> props do not respect type (Number), this.cid should be number
          if(s.cid === parseInt(this.cid)){
            r.eid = s.eid;
          }
        });
      }
      return r;
    },
    superposed_cid_eid () {
      if (this.superposition) {
        let r = null;
        this.superposition.forEach(s => {
          if(this.opened_concernement && s.cid !== this.opened_concernement.id){
            r = {
              cid: s.cid,
              eid: s.eid
            }
          }
        });
        console.log('superposed_cid_eid', r);
        return r;
      } else {
        return null
      }
      
    }
  },
  created () {
    console.log(`Concernement view created, this.$route`, this.$route);
    console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
    console.log('Concernement view created, allSuperpositions_clustered', this.allSuperpositions_clustered);
    console.log("superposition", this.superposition);

    if(this.map_mode === "proximite"){
      if (this.$route.query.proximite_cid && this.$route.query.proximite_eid) {
        this.proximite_cid_eid = {
          cid: this.$route.query.proximite_cid,
          eid: this.$route.query.proximite_eid,
        }
      }
      // as we have two content to show multiply the cartouch with by 2
      // necessary for mapitem opening scale and position
      this.setCartoucheWidth(2)
    }else if(this.map_mode === "superposition" && this.$route.query.superposition_cluster_index){
      this.getSuperposition()
      // as we have two content to show multiply the cartouch with by 2
      // necessary for mapitem opening scale and position
      this.setCartoucheWidth(2)
    }else{
      // as we have one content to show multiply the cartouch with by 1
      // necessary for mapitem opening scale and position
      this.setCartoucheWidth(1)
    }
    
    // when we arrived directly to the url, load the entite
    // this.eid provided by route params
    if (this.map_mode === "terraindevie" && this.eid) {
      this.setOpenedEntiteId(this.eid)
    }
  },
  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(parseInt(this.cid))
        }
      },
      deep: true
    },
    eid: {
      handler (n, o){
        this.setOpenedEntiteId(n)
      },
      deep: true
    },
    // watch superposition_id query
    $route: {
      handler (n, o) {
        console.log("concernement view $route watcher o, n", o, n);
        if (n.query && n.query.superposition_cluster_index) {
          this.getSuperposition()
        }
        if (n.query && n.query.proximite_cid && n.query.proximite_eid) {
          this.proximite_cid_eid = {
            cid: n.query.proximite_cid,
            eid: n.query.proximite_eid,
          }
          this.setCartoucheWidth(2)
        }else{
          this.proximite_cid_eid = null;
          this.setCartoucheWidth(1)
        }
      },
      deep: true
    },
    map_mode: {
      handler (n, o) {
        console.log('concernement watch map_mode', o, n);
        if(n === "proximite" || n === "superposition"){
          // as we have two content to show multiply the cartouch with by 2
          // necessary for mapitem opening scale and position
          this.setCartoucheWidth(2)
        }else{
          // as we have one content to show multiply the cartouch with by 1
          // necessary for mapitem opening scale and position
          this.setCartoucheWidth(1)
        }
      },
      deep: true
    }

  },
  methods: {
    ...mapActions(ConcernementsStore,['openCloseConcernements',
                                      'setOpenedEntiteId',
                                      'setMapMode',
                                      'resetConcernementOpened']),
    ...mapActions(CommonStore,['setCartoucheWidth']),
    getSuperposition(){
      console.log('getSuperposition');
      // get superposition_cluster_id and superposition object
      if (this.$route.query.superposition_cluster_index) {
        this.superposition_cluster_index = this.$route.query.superposition_cluster_index;
        console.log('this.superposition_cluster_index', this.superposition_cluster_index);
        if(this.superposition_cluster_index){
          // let ids = this.superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
          // let couple_key = `${ids[1]}-${ids[3]}`
          // // console.log('superposition_id', this.superposition_id, couple_key, ids);
          // if (this.allSuperpositions_bycids[couple_key][this.superposition_id]) {
          //   this.superposition = this.allSuperpositions_bycids[couple_key][this.superposition_id]
          //   console.log("this.superposition", this.superposition);
          // }
          let cluster = this.allSuperpositions_clustered[this.superposition_cluster_index];
          this.superposition = []
          for(let cid_eid of cluster){
            if (cid_eid.cid === this.cid) {
              this.superposition.push(cid_eid)
            }
            if (cid_eid.cid === parseInt(this.$route.query.superposed_cid)){
              this.superposition.push(cid_eid)
              // console.log('this.superposition', this.superposition);
            }
          }
        }
      }
      
    },
    closeConcernement(){
      this.resetConcernementOpened();
    }
  },
  components: {
    TerrainDeVie,
    PuissanceAgir,
    Doleancer
  }
}

</script>

<template>
  <section v-if="opened_concernement" class="concernement">
    <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action' || map_mode === 'superposition' || map_mode === 'proximite'" :cid="main_cid_eid.cid" :eid="main_cid_eid.eid"/>
    <PuissanceAgir v-if="map_mode === 'puissancedagir'" :cid="cid"/>
    <Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/>
  </section>
  <section v-if="map_mode === 'superposition' && superposition && superposed_cid_eid" class="concernement clone">
    <TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" />
  </section>
  <section v-if="map_mode === 'proximite' && proximite_cid_eid" class="concernement clone">
    <TerrainDeVie :cid="proximite_cid_eid.cid" :eid="proximite_cid_eid.eid" />
  </section>
  <nav class="close-concernement" @click="closeConcernement">
    <svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
      <mask id="arrowMask">
        <rect x="0" y="0" width="24" height="24" fill="white"/>
        <path :d="arrowup_path" fill="black"/>
      </mask>
      <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
    </svg> 
  </nav>

</template>

<style lang="scss" scoped>
  nav.close-concernement{
    position: absolute;
    top:65px;
    left: -30px;
    cursor: pointer;
  }
</style>
