<template>
  <div
    v-if="field && field.field_type === 'char'"
  >
    <label
      v-if="$route.name === 'editer-signalement'"
      :for="field.name"
    >
      {{ field.label }}
    </label>
    <input
      :id="field.name"
      :value="field.value"
      type="text"
      :name="field.name"
      @blur="updateStore_extra_form"
    >
  </div>

  <div
    v-else-if="field && field.field_type === 'list'"
  >
    <label
      v-if="$route.name === 'editer-signalement'"
      :for="field.name"
    >
      {{ field.label }}
    </label>
    <Dropdown
      :options="field.options"
      :selected="selected_extra_form_list"
      :selection.sync="selected_extra_form_list"
    />
  </div>
  <div
    v-else-if="field && field.field_type === 'integer'"
  >
    <label
      v-if="$route.name === 'editer-signalement'"
      :for="field.name"
    >
      {{ field.label }}
    </label>
    <div class="ui input">
      <!-- //* si click sur fléche dans champ input, pas de focus, donc pas de blur, donc utilisation de @change -->
      <input
        :id="field.name"
        :value="field.value"
        type="number"
        :name="field.name"
        @change="updateStore_extra_form"
      >
    </div>
  </div>
  <div
    v-else-if="field && field.field_type === 'boolean'"
  >
    <div class="ui checkbox">
      <input
        :id="field.name"
        type="checkbox"
        :checked="field.value"
        :name="field.name"
        @change="updateStore_extra_form"
      >
      <label :for="field.name">
        {{ $route.name === 'editer-signalement' ? field.label : '' }}
      </label>
    </div>
  </div>
  <div
    v-else-if="field && field.field_type === 'date'"
  >
    <label
      v-if="$route.name === 'editer-signalement'"
      :for="field.name"
    >
      {{ field.label }}
    </label>
    <input
      :id="field.name"
      :value="field.value"
      type="date"
      :name="field.name"
      @blur="updateStore_extra_form"
    >
  </div>
  <div
    v-else-if="field && field.field_type === 'decimal'"
  >
    <label
      v-if="$route.name === 'editer-signalement'"
      :for="field.name"
    >
      {{ field.label }}
    </label>
    <div class="ui input">
      <input
        :id="field.name"
        :value="field.value"
        type="number"
        step=".01"
        :name="field.name"
        @change="updateStore_extra_form"
      >
    </div>
  </div>
  <div
    v-else-if="field && field.field_type === 'text'"
  >
    <label
      v-if="$route.name === 'editer-signalement'"
      :for="field.name"
    >
      {{ field.label }}
    </label>
    <textarea
      :value="field.value"
      :name="field.name"
      rows="3"
      @blur="updateStore_extra_form"
    />
  </div>
</template>

<script>
import Dropdown from '@/components/Dropdown.vue';

export default {
  name: 'FeatureExtraForm',

  components: {
    Dropdown,
  },

  props: {
    field: {
      type: Object,
      default: null,
    }
  },

  computed: {
    selected_extra_form_list: {
      get() {
        return this.field.value || '';
      },
      set(newValue) {
        //* set the value selected in the dropdown
        const newExtraForm = this.field;
        newExtraForm['value'] = newValue;
        this.$store.commit('feature/UPDATE_EXTRA_FORM', newExtraForm);
      },
    },
  },

  methods: {
    updateStore_extra_form(evt) {
      const newExtraForm = this.field;
      if (this.field.field_type === 'boolean') {
        newExtraForm['value'] = evt.target.checked; //* if checkbox use "checked"
      } else {
        newExtraForm['value'] = evt.target.value;
      }
      this.$store.commit('feature/UPDATE_EXTRA_FORM', newExtraForm);
    },
  },
};
</script>