<script>

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

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'

export default {
  props: ['id', 'eid'],
  data(){
    return {
      entite: null,
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened']),
    // ...mapState(ConcernementsStore,['opened_entity_id']),
    ...mapState(ConcernementsStore,['concernements_loaded']),
    ...mapState(ConcernementsStore,['ct_concernement'])
  },
  created () {
    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
    
    // 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:${this.opened}, id:${this.id}`);
        // when we arrived directly to the url then all concernement are loaded: do open the concernement
        if (!this.opened) {
          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']),
    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)
        })
    }
  },
  components: {
  }
}

</script>

<template>
  <section v-if="opened" class="concernement">
    <div v-if="entite">{{ entite.title }}</div>
    <header v-if="concernements_loaded">
      <label v-if="ct_concernement">{{ ct_concernement.title.description }}</label>
      <h2>{{ opened.title }}</h2>
    </header>
    <section  v-if="concernements_loaded" class="description">
      <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
      <div v-html="opened.description"/>
    </section>
    <section  v-if="concernements_loaded" class="caillou">
      <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
      <div v-html="opened.caillou "/>
    </section>
  </section>
</template>

<style lang="scss" scoped>

</style>
