<script>

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

// import CartoucheLayout from '@components/layout/CartoucheLayout.vue';


export default {
  props: [],
  data(){
    return {
      value: null,
      content_type: null
    }
  },
  computed: {
    ...mapState(SearchStore,['phrase', 'contentTypeFilter', 'results', 'loaded_results']),
    ...mapState(ConcernementsStore,['map_mode', 'opened_concernement']),
    // value(){
    //   return this.keys
    // }
  },
  created () {
    console.log("search created");
    this.value = this.phrase;
    this.content_type = this.contentTypeFilter;
  },
  watch: {
    value: {
      handler (n,o){
        this.setSearchValue(n);
      },
      deep: true
    },
    content_type: {
      handler (n,o){
        this.setContentType(n);
      },
      deep: true
    },
  },
  methods: {
    ...mapActions(SearchStore,['setSearchValue','setContentType','newSearch']),
    ...mapActions(ConcernementsStore,['openCloseConcernements']),
    onSubmitSearch (event) {
      console.log("onSubmitSearch", event, this.value);
      // let value = event.target[0].value;
      this.newSearch();
    },
    onClickResult(cid, eid) {
      // open map item
      this.openCloseConcernements(cid)
      // apoen cartouch via routing
      this.$router.push({
        name: 'concernement',
        hash: `#${this.map_mode}`,
        params: {cid: cid, eid: eid}
      });
    }
  },
  components: {
    // CartoucheLayout
  }
}

</script>

<template>
  <section class="search">

    
      <header>

        <h2>Recherche</h2>
        <form action=""  @submit.prevent="onSubmitSearch">
          <input type="text" v-model="value">
          <!-- <select name="content_type" id="content-type-select">
            <option value="all">type de contenu</option>
            <option value="concernement">Concernement</option>
            <option value="entite">Entite</option>
          </select> -->

          <section class="content-type-checkboxes">
            <input type="radio" name="concernement" id="concernement_radio" v-model="content_type" value="concernements">
            <label for="concernement_radio">Concernements</label>
            <input type="radio" name="entite" id="entite_radio" v-model="content_type" value="entites">
            <label for="entite_radio">Entités</label>
          </section>
          
          
          <!-- <select name="bourgeons" id="content-type-select">
            <option value="all">Bourgeon</option>
            <option value="bourgeon1">Bourgeon1</option>
            <option value="bourgeon2">Bourgeon2</option>
          </select> -->

          <input type="submit" value="rechercher">
        </form>
      </header>

      <main>
        <section class="results">
          <ul v-if="loaded_results && loaded_results.length">
            <li v-for="result in loaded_results">
              <template v-if="results.content_type === 'entites'">
                <h1 @click.prevent="onClickResult(result.concernement.id, result.id)">
                  {{ result.title }}
                </h1>
                <h2 @click.prevent="onClickResult(result.concernement.id, result.id)">
                  <span>une entité de </span>{{ result.author.username }}
                </h2>
              </template>
              <template v-else>
                <h1 @click.prevent="onClickResult(result.id)">
                  {{ result.title }}
                </h1>
                <h2 @click.prevent="onClickResult(result.id)">
                  <span>une enquête de </span>{{ result.author.username }}
                </h2>
              </template>            
            </li>
          </ul>
          <div v-else-if="loaded_results">Aucun résultats</div>
        </section>
      </main>

      <footer>

      </footer>
    
  </section>
</template>

<style lang="scss" scoped>

</style>
