<script>

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

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

import ContentEditable from '@components/editable/ContentEditable.vue';

export default {
  props: ['cid','eid'],
  emits: ['main_scrolled'],
  data(){
    return {
      headphones_path: mdiHeadphones,
      mainscrolled: false,
      headerreduced: false,
      entite: false
    }
  },
  created () {
    console.log('Cartouch layout created', this.cid);
    this.concernement = this.concernementsByID[this.cid];
    console.log('can_update', this.concernement.can_update);
  },
  mounted () {
    // console.log('cartouche layout mounted', this);
    // this.$refs.cartouche_main.addEventListener('scroll', (event) => {
    //   console.log('main is scrolling', event);
    //   let $main = event.target;
    //   let scrolled = $main.scrollTop > 0;
    //   this.$emit('main_scrolled', scrolled);
    //   // TODO how to make this failsafe limit responsive ? 
    //   if(scrolled && $main.scrollHeight > 900){
    //     this.headerreduced = true;
    //   } else {
    //     this.headerreduced = false;
    //   }
    // })
  },
  computed: {
    ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
  },
  watch: {
    cid: {
      handler (n,o) {
        console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
        if (n) {
          this.concernement = this.concernementsByID[n];
          console.log('can_update', this.concernement.can_update);
        }
      },
      deep: true
    },
    eid: {
      handler (n, o) {
        console.log(`TerrainDeVie watch eid o:${o}, n:${n}`);
        if (n) {
          this.entite = true;
        }else{
          this.entite = false;
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(ConcernementsStore,['setMapMode',"setConcernementIsUpdating","reloadConcernementField"]),
    // triggered when focus out and gql patch xhr triggered
    concernementFieldIsUpdating(field){
      this.setConcernementIsUpdating(this.cid);
    },
    concernementFieldUpdated(field){
      this.setConcernementIsUpdating(null);
      this.reloadConcernementField(this.cid, field);
    }
  },
  components: {
    SvgIcon,
    ContentEditable
  }
}
</script>

<template>
  <header ref="cartouche_header">
    <div class="concernement-cartouche-icons">
      <label class="concernement-label">{{ ct_concernement.title.description }}</label>
      <!-- :class="{ hidden: headerreduced }" -->
      <ContentEditable 
        tag="h2"
        :value="concernement.title" 
        :class="{ ellipsed: entite }" 
        :contenteditable="(concernement.can_update && !entite)"
        :data="{
          entitytype: 'node',
          bundle: 'concernement',
          id: this.concernement.id,
          field: {field_name: 'title', value:'value'}
        }" 
        v-on:updating="concernementFieldIsUpdating('title')"
        v-on:updated="concernementFieldUpdated('title')"/>


      <!-- <nav class="icons">
        <ul>
          <li v-if="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="concernement.has_puissancedagir" >
            <a href="#puissanceagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span></a>
          </li>
          <li v-if="concernement.has_proximite" >
            <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
          </li>
          <li v-if="concernement.has_superposition" >
            <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
          </li>
          <li v-if="concernement.has_agissantes" >
            <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
          </li>
          <li v-if="concernement.has_doleance" >
            <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
          </li>
        </ul>
      </nav> -->

    </div>
    <slot name="header"></slot>
  </header>
  <main ref="cartouche_main">
    <slot name="main"></slot>
  </main>
  <footer ref="cartouche_footer">
    <slot name="footer"></slot>
  </footer>
</template>