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

  <div v-frag v-else-if="field.field_type === 'list'">
    <label for="field.name">{{ field.label }}</label>
    <Dropdown
      :options="field.options"
      :selected="selected_extra_form_list"
      :selection.sync="selected_extra_form_list"
    />
  </div>
  <div v-frag v-else-if="field.field_type === 'integer'">
    <label 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
        type="number"
        :name="field.name"
        :id="field.name"
        v-model.number="field.value"
        @change="updateStore_extra_form"
      />
    </div>
  </div>
  <div v-frag v-else-if="field.field_type === 'boolean'">
    <div class="ui checkbox">
      <input
        type="checkbox"
        :checked="field.value"
        :name="field.name"
        :id="field.name"
        @change="updateStore_extra_form"
      />
      <label for="field.name">{{ field.label }}</label>
    </div>
  </div>
  <div v-frag v-else-if="field.field_type === 'date'">
    <label for="field.name">{{ field.label }}</label>
    <input
      type="date"
      :name="field.name"
      :id="field.name"
      v-model="field.value"
      @blur="updateStore_extra_form"
    />
  </div>
  <div v-frag v-else-if="field.field_type === 'decimal'">
    <label for="field.name">{{ field.label }}</label>
    <div class="ui input">
      <input
        type="number"
        step=".01"
        :name="field.name"
        :id="field.name"
        v-model.number="field.value"
        @change="updateStore_extra_form"
      />
    </div>
  </div>
  <div v-frag v-else-if="field.field_type === 'text'">
    <label :for="field.name">{{ field.label }}</label>
    <textarea
      :name="field.name"
      rows="3"
      v-model="field.value"
      @blur="updateStore_extra_form"
    ></textarea>
  </div>
</template>

<script>
import frag from "vue-frag";
import Dropdown from "@/components/Dropdown.vue";

export default {
  name: "FeatureExtraForm",

  directives: {
    frag,
  },

  components: {
    Dropdown,
  },

  props: ["field"],

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

  methods: {
    updateStore_extra_form(evt) {
      let 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>