<template>
  <section class="choose-label-set-modal">
    <b-modal
      ref="modal"
      v-model="show"
      :can-cancel="['x', 'outside']"
      class="modal-absolute modal-400 modal-no-footer"
      :on-cancel="close"
    >
      <section class="modal-card-body">
        <div class="content">
          <h3>
            {{
              isMultipleAnnotations
                ? $t("new_multi_ann_title")
                : $t("new_ann_set_title")
            }}
          </h3>
          <p>
            {{
              isMultipleAnnotations
                ? $t("new_multi_ann_description")
                : $t("new_ann_set_description")
            }}
          </p>
          <b-dropdown
            v-model="selectedLabelSet"
            aria-role="list"
            :disabled="labelSets.length === 0"
            class="label-set-dropdown"
          >
            <template #trigger>
              <div>
                <div>
                  <span v-if="selectedLabelSet">{{
                    selectedLabelSet.name
                  }}</span>
                  <span v-else>{{ $t("select_label_set") }}</span>
                </div>
              </div>
            </template>
            <b-dropdown-item
              v-for="labelSetItem in labelSets"
              :key="labelSetItem.id"
              aria-role="listitem"
              :value="labelSetItem"
              @click="setSelectedLabelSet(labelSetItem)"
            >
              <span>{{ labelSetItem.name }}</span>
            </b-dropdown-item>
          </b-dropdown>
          <div v-if="selectedLabelSet" class="labels-list">
            <div v-if="isMultipleAnnotations" class="labels-select">
              <div v-for="label in labels" :key="label.id">
                <b-checkbox v-model="label.selected">{{
                  label.name
                }}</b-checkbox>
              </div>
            </div>
            <span v-for="(label, index) in labels" v-else :key="label.id">{{
              `${label.name}${index + 1 !== labels.length ? ", " : ""}`
            }}</span>
          </div>
          <b-button
            class="submit-ann-set"
            type="is-primary"
            :disabled="!selectedLabelSet"
            @click="submit"
          >
            {{ $t("continue") }}
          </b-button>
          <p
            v-if="!isMultipleAnnotations && selectedLabelSet"
            class="next-step-description"
          >
            {{ $t("new_ann_set_hint") }}
          </p>
        </div>
      </section>
    </b-modal>
  </section>
</template>

<script>
/**
 * This component shows a modal to choose a label set from the project
 */

import { mapGetters, mapState } from "vuex";

export default {
  name: "CreateAnnotationSetModal",
  computed: {
    ...mapState("document", ["annotationSets"]),
    ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
  },
  props: {
    isMultipleAnnotations: {
      default: false,
      required: false,
    },
  },
  data() {
    return {
      selectedLabelSet: null,
      labelSets: [],
      show: true,
      labels: [],
    };
  },
  mounted() {
    this.$store.dispatch("project/fetchLabelSets").then((data) => {
      this.labelSets = this.labelSetsFilteredForAnnotationSetCreation(
        data,
        this.annotationSets
      );
    });
  },
  methods: {
    submit() {
      // filter labels that were selected (by default all are selected so no issue if the feature is disabled)
      const labelsFiltered = this.labels.filter((label) => label.selected);
      this.selectedLabelSet.labels = this.selectedLabelSet.labels.filter(
        (label) => {
          return labelsFiltered.find((filtered) => filtered.id === label.id);
        }
      );

      this.$emit("labelSet", this.selectedLabelSet);
      this.close();
    },
    setSelectedLabelSet(labelSet) {
      this.createLabelsList(labelSet.labels);
      this.selectedLabelSet = labelSet;
    },
    close() {
      this.$emit("close");
    },
    createLabelsList(labels) {
      this.labels = labels.map((label) => {
        return {
          ...label,
          selected: true,
        };
      });
    },
  },
};
</script>

<style
  scoped
  lang="scss"
  src="../../assets/scss/choose_label_set_modal.scss"
></style>
