<script>

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

export default {
  props: [],
  data(){
    return {
      value: null,
      content_types: ['concernement', 'entite']
    }
  },
  computed: {
    ...mapState(SearchStore,['keys', 'contentTypesFilter', 'results']),
    // value(){
    //   return this.keys
    // }
  },
  created () {
    console.log("search created");
    this.setContentTypes(this.content_types);
  },
  watch: {
    value: {
      handler (n,o){
        this.setKeys(n);
      },
      deep: true
    },
    content_types: {
      handler (n,o){
        this.setContentTypes(n);
      },
      deep: true
    },
  },
  methods: {
    ...mapActions(SearchStore,['setKeys','setContentTypes','loadResults']),
    onSubmitSearch (event) {
      console.log("onSubmitSearch", event, this.value);
      // let value = event.target[0].value;
      this.loadResults();
    }    
  },
  components: {
    // MapConcernements
  }
}

</script>

<template>
  <section class="search">
    <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="checkbox" name="concernement" id="concernement_checkbox" v-model="content_types" value="concernement">
        <label for="concernement">Concernements</label>
        <input type="checkbox" name="entite" id="entite_checkbox" v-model="content_types" value="entite">
        <label for="concernement">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>
    <section class="results">
      <ul>
       <li v-for="result in results">{{ result }}</li>
      </ul>
    </section>
  </section>
</template>

<style lang="scss" scoped>

</style>
