<script>

import REST from '@api/rest-axios'

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

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

export default {
  props: {
    tag: String, 
    value: String, 
    end_value : {
      type : String,
      default : null
    },
    contenteditable : {
      type : [Boolean, String],
      default : true
    },
    mode : {
      type : String,
      default : null
    },
    data: Object,
    placeholder : {
      type : String,
      default : 'Choisir une date'
    }
  },
  emits: ['updated'],
  data(){
    return {
      date: null
    }
  },
  computed: {
    ...mapState(UserStore,['csrf_token']),
      attrs() {
        // console.log(`this.mode: ${this.mode}`);
        let a = {};
        if (this.mode && this.mode === 'range') {
         a.range = true;
        }
        return a;
      }
  },
  created () {
    console.log('DateEditable created');
    this.initDateValues();
  },
  // updated() {
  //   console.log('DateEditable updated');
  //   this.initDateValues();
  // },
  mounted () {
  },
  beforeUnmount() {
  },
  watch: {
    value (n, o) { 
      console.log(`dateEditable watch value n, o`, n, o);
      
      if(n !== o){
        this.initDateValues();
      } 
    },
  },
  methods: {
    ...mapActions(ConcernementsStore, ['reloadConcernements']),
    initDateValues(){
      if (this.value) {
        if (this.mode && this.mode === 'range') {
          this.date = [this.value, this.end_value]
        }else{
          this.date = this.value;
        }
      } else {
        this.date = null;
      }
    },
    onDateSelected(modeldata){
      console.log('onDateSelected, modeldata', modeldata);
      this.save();
    },
    save(){
      console.log('save csrf_token', this.csrf_token);
      console.log('save this.data', this.data);
      console.log('save this.date', this.date);

      let params = {
        type: this.data.bundle,
      };

      if (this.data.entitytype === 'node') {
        params.nid = [{"value":this.data.id}];
      } else {
        params.id = [{"value":this.data.id}];
      }

      if (this.mode && this.mode === "range") {
        params[this.data.field.field_name] = [{
          value: this.date[0],
          end_value: this.date[1]
        }]
      } else {
        params[this.data.field.field_name] = [{
          value: this.date
        }]
      }

      const configs = {
        headers: {'X-CSRF-Token': this.csrf_token}
      };

      // url is not the same between nodes and others entities
      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
      // call the api
      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
        .then(({ data }) => {
          console.log('user REST post node data', data)
          this.$emit('updated');
        })
        .catch(error => {
          console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
          Promise.reject(error)
        })
    }
  },
  components: {
    VueDatePicker
  }
}
</script>

<template>
  <VueDatePicker 
    v-if="contenteditable" 
    v-model="date" 
    model-type="yyyy-MM-dd" 
    format="dd-MM-yyyy" 
    :enable-time-picker="false" 
    :clearable="false"
    @update:model-value="onDateSelected"
    :placeholder="placeholder"
    v-bind="attrs"/>
  <span v-else class="date">{{ value }}</span>

</template>