<template>
  <div class="vue-component">
    <h2><a id="section-30" />{{ $t("origin.title") }}</h2>

    <div class="mb-4">
      <label for="selectOrigin">
        {{ $t("origin.title") }}
      </label>

      <VueMultiselect
        name="selectOrigin"
        label="text"
        :custom-label="transText"
        track-by="id"
        :multiple="false"
        :searchable="true"
        :placeholder="$t('origin.placeholder')"
        v-model="value"
        :options="options"
        :select-label="$t('multiselect.select_label')"
        :deselect-label="$t('multiselect.deselect_label')"
        :selected-label="$t('multiselect.selected_label')"
        @select="updateOrigin"
      />
    </div>

    <div v-if="!isOriginValid" class="alert alert-warning to-confirm">
      {{ $t("origin.not_valid") }}
    </div>
  </div>
</template>

<script>
import VueMultiselect from "vue-multiselect";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import { mapState, mapGetters } from "vuex";

export default {
  name: "OriginDemand",
  components: { VueMultiselect },
  data() {
    return {
      options: [],
    };
  },
  computed: {
    ...mapState({
      value: (state) => state.accompanyingCourse.origin,
    }),
    ...mapGetters(["isOriginValid"]),
  },
  mounted() {
    this.getOptions();
  },
  methods: {
    getOptions() {
      const url = `/api/1.0/person/accompanying-period/origin.json`;
      makeFetch("GET", url)
        .then((response) => {
          this.options = response.results;
          return response;
        })
        .catch((error) => {
          commit("catchError", error);
          this.$toast.open({ message: error.txt });
        });
    },
    updateOrigin(value) {
      this.$store
        .dispatch("updateOrigin", value)
        .catch(({ name, violations }) => {
          if (name === "ValidationException" || name === "AccessException") {
            violations.forEach((violation) =>
              this.$toast.open({ message: violation }),
            );
          } else {
            this.$toast.open({ message: "An error occurred" });
          }
        });
    },
    transText({ text }) {
      return text.fr;
    },
  },
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="css" scoped>
label {
  display: none;
}
</style>
