<template>
  <div class="ui teal segment">
    <h4>
      Liaison
      <button
        @click="remove_linked_formset"
        class="ui small compact right floated icon button remove-formset"
        type="button"
      >
        <i class="ui times icon"></i>
      </button>
    </h4>
    {{ form.errors }}
    <div class="visible-fields">
      <div class="two fields">
        <div class="required field">
          <label for="form.relation_type.id_for_label">{{
            form.relation_type.label
          }}</label>
          <Dropdown
            :options="form.relation_type.field.choices"
            :selected="selected_relation_type"
            :selection.sync="selected_relation_type"
          />
          {{ form.relation_type.errors }}
        </div>
        <div class="required field">
          <label for="form.feature_to.id_for_label">{{
            form.feature_to.label
          }}</label>
          <Dropdown
            :options="featureOptions"
            :selected="selected_feature_to"
            :selection.sync="selected_feature_to"
          />
          {{ form.feature_to.errors }}
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "FeatureLinkedForm",

  props: ["linkedForm", "features"],

  components: {
    Dropdown,
  },

  computed: {
    featureOptions: function() {
      return this.features.map(el=> `${el.title} (${el.display_creator} - ${el.created_on})`) 
    },
    selected_relation_type: {
      // getter
      get() {
        return this.form.relation_type.value;
      },
      // setter
      set(newValue) {
        this.form.relation_type.value = newValue;
        this.updateStore();
      },
    },
    selected_feature_to: {
      // getter
      get() {
        return this.form.feature_to.value;
      },
      // setter
      set(newValue) {
        this.form.feature_to.value = newValue;
        this.updateStore();
      },
    },
  },

  data() {
    return {
      form: {
        errors: null,
        relation_type: {
          errors: null,
          id_for_label: "relation_type",
          field: {
            choices: ["Doublon", "Remplace", "Est remplacé par", "Dépend de"],
          },
          html_name: "relation_type",
          label: "Type de liaison",
          value: "",
        },
        feature_to: {
          errors: null,
          id_for_label: "feature_to",
          field: {
            max_length: 30,
          },
          html_name: "feature_to",
          label: "Signalement lié",
          value: "",
        },
      },
    };
  },
  methods: {
    remove_linked_formset() {
      this.$store.commit("feature/REMOVE_LINKED_FORM", this.linkedForm.dataKey);
    },
    updateStore() {
      this.$store.commit("feature/UPDATE_LINKED_FORM", {
        dataKey: this.linkedForm.dataKey,
        relation_type: this.form.relation_type.value,
        feature_to: this.form.feature_to.value,
      });
    },
  },
};
</script>