<template>
  <div v-if="hasResult" class="addResult">
    <p v-if="pickedResults.length === 0" class="chill-no-data-statement">
      Aucun résultat associé
    </p>

    <ul class="list-suggest remove-items">
      <li v-for="r in pickedResults" @click="removeResult(r)" :key="r.id">
        <span>
          {{ localizeString(r.title) }}
        </span>
      </li>
    </ul>

    <div class="accordion" id="expandedSuggestions">
      <div class="accordion-item">
        <h2 class="accordion-header" id="heading_expanded_suggestions">
          <button
            v-if="isExpanded"
            class="accordion-button"
            type="button"
            data-bs-toggle="collapse"
            aria-expanded="true"
            @click="toggleSelect"
          >
            Masquer
          </button>

          <button
            v-else
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            aria-expanded="false"
            @click="toggleSelect"
          >
            Résultats et orientations disponibles
          </button>
        </h2>
        <div
          class="accordion-collapse"
          id="collapse_expanded_suggestions"
          aria-labelledby="heading_expanded_suggestions"
          data-bs-parent="#expandedSuggestions"
        >
          <template v-if="isExpanded">
            <ul class="list-suggest add-items">
              <li
                v-for="r in availableForCheckResults"
                @click="addResult(r)"
                :key="r.id"
              >
                <span>{{ localizeString(r.title) }}</span>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </div>
  </div>
  <div v-if="!hasResult" class="noResult">
    <div class="chill-no-data-statement">
      {{ $t("goal_has_no_result") }}
    </div>
  </div>
</template>

<script>
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

const i18n = {
  messages: {
    fr: {
      add_a_result: "Résultat - orientation disponibles",
      goal_has_no_result: "Aucun résultat - orientation disponible",
    },
  },
};

export default {
  name: "AddResult",
  props: ["destination", "goal", "availableResults"],
  i18n,
  data() {
    return {
      isExpanded: false,
    };
  },
  computed: {
    hasResult() {
      if (this.destination === "action") {
        return this.$store.state.resultsForAction.length > 0;
      } else if (this.destination === "goal") {
        return this.$store.getters.resultsForGoal(this.goal).length > 0;
      }

      throw Error(`this.destination is not implemented: ${this.destination}`);
    },
    pickedResults() {
      if (this.destination === "action") {
        return this.$store.state.resultsPicked;
      } else if (this.destination === "goal") {
        return this.$store.getters.resultsPickedForGoal(this.goal);
      }

      throw Error(`this.destination is not implemented: ${this.destination}`);
    },
    availableForCheckResults() {
      if (this.destination === "action") {
        let pickedIds = this.$store.state.resultsPicked.map((r) => r.id);

        return this.$store.state.resultsForAction.filter(
          (r) => !pickedIds.includes(r.id),
        );
      } else if (this.destination === "goal") {
        let pickedIds = this.$store.getters
          .resultsPickedForGoal(this.goal)
          .map((r) => r.id);

        return this.$store.getters
          .resultsForGoal(this.goal)
          .filter((r) => !pickedIds.includes(r.id));
      }

      throw Error(`this.destination is not implemented: ${this.destination}`);
    },
  },
  methods: {
    localizeString,
    toggleSelect() {
      this.isExpanded = !this.isExpanded;
    },
    addResult(r) {
      if (this.destination === "action") {
        this.$store.commit("addResultPicked", r);
        return;
      } else if (this.destination === "goal") {
        this.$store.commit("addResultForGoalPicked", {
          goal: this.goal,
          result: r,
        });
        return;
      }
      throw Error(`this.destination is not implemented: ${this.destination}`);
    },
    removeResult(r) {
      if (this.destination === "action") {
        this.$store.commit("removeResultPicked", r);
        return;
      } else if (this.destination === "goal") {
        this.$store.commit("removeResultForGoalPicked", {
          goal: this.goal,
          result: r,
        });
        return;
      }
      throw Error(`this.destination is not implemented: ${this.destination}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.accordion-button {
  padding: 0.25rem;
}
</style>
