<template>
  <teleport to="#location">
    <div class="mb-3 row">
      <label :class="locationClassList">
        {{ trans(ACTIVITY_LOCATION) }}
      </label>
      <div class="col-sm-8">
        <VueMultiselect
          name="selectLocation"
          id="selectLocation"
          label="name"
          track-by="id"
          open-direction="top"
          :multiple="false"
          :searchable="true"
          :placeholder="trans(ACTIVITY_CHOOSE_LOCATION)"
          :custom-label="customLabel"
          :select-label="trans(MULTISELECT_SELECT_LABEL)"
          :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
          :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
          :options="availableLocations"
          group-values="locations"
          group-label="locationGroup"
          v-model="location"
        />
        <new-location v-bind:available-locations="availableLocations" />
      </div>
    </div>
  </teleport>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import VueMultiselect from "vue-multiselect";
import NewLocation from "./Location/NewLocation.vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
import {
  trans,
  ACTIVITY_LOCATION,
  ACTIVITY_CHOOSE_LOCATION,
  MULTISELECT_SELECT_LABEL,
  MULTISELECT_DESELECT_LABEL,
  MULTISELECT_SELECTED_LABEL,
} from "translator";

export default {
  name: "Location",
  components: {
    NewLocation,
    VueMultiselect,
  },
  setup() {
    return {
      trans,
      ACTIVITY_LOCATION,
      ACTIVITY_CHOOSE_LOCATION,
      MULTISELECT_SELECT_LABEL,
      MULTISELECT_DESELECT_LABEL,
      MULTISELECT_SELECTED_LABEL,
    };
  },
  data() {
    return {
      locationClassList: `col-form-label col-sm-4 ${document.querySelector("input#chill_activitybundle_activity_location").getAttribute("required") ? "required" : ""}`,
    };
  },
  computed: {
    ...mapState(["activity", "availableLocations"]),
    ...mapGetters(["suggestedEntities"]),
    location: {
      get() {
        return this.activity.location;
      },
      set(value) {
        this.$store.dispatch("updateLocation", value);
      },
    },
  },
  methods: {
    labelAccompanyingCourseLocation(value) {
      return `${value.address.text} (${localizeString(value.locationType.title)})`;
    },
    customLabel(value) {
      return value.locationType
        ? value.name
          ? value.name === "__AccompanyingCourseLocation__"
            ? this.labelAccompanyingCourseLocation(value)
            : `${value.name} (${localizeString(value.locationType.title)})`
          : localizeString(value.locationType.title)
        : "";
    },
  },
};
</script>
