<script>

import REST from '@api/rest-axios'

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


export default {
  props: {
    checked: Boolean,
    label: String, 
    data: Object
  },
  emits: ['updated'],
  data(){
    return {
      
    }
  },
  computed: {
    ...mapState(UserStore,['csrf_token']),
  },
  created () {
    console.log('CheckboxEditable created');
  },
  mounted () {

  },
  methods: {
    ...mapActions(ConcernementsStore, ['reloadConcernements']),
    onInput(e){
      // console.log('onInput checkbox e', e);
      let checked  = e.target.checked;
      // console.log('onInput checkbox checked', checked);
      this.save(checked)
    },
    save(checked){
      // console.log('save csrf_token', this.csrf_token);
      let params = {
        type: this.data.bundle,
        // nid: [{"value":this.data.nid}],
        [this.data.field]: {value: checked}
      };
      if (this.data.entitytype === 'node') {
        params.nid = [{"value":this.data.id}];
      } else {
        params.id = [{"value":this.data.id}];
      }
      const configs = {
        headers: {'X-CSRF-Token': this.csrf_token}
      };

      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
        .then(({ data }) => {
          console.log(`checkboxEditable REST patch ${this.data.entitytype} data`, data)
          // TODO if success update the data in pinia 
          // this.reloadConcernements();
          this.$emit('updated');
        })
        .catch(error => {
          console.warn(`Issue with patch node ${this.data.bundle}`, error)
          Promise.reject(error)
        })
    }
  },
}
</script>

<template>
  <section class="editable">
    <label><input type="checkbox" :checked="checked" @input="onInput"> {{ label }}</label>
  </section>
</template>