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

    <div class="mb-4">
      <div class="form-check" v-for="s in scopes" :key="s.id">
        <input
          class="form-check-input"
          type="checkbox"
          v-model="checkedScopes"
          :value="s"
        />
        <label class="form-check-label">
          {{ localizeString(s.name) }}
        </label>
      </div>
    </div>

    <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
      {{ $t("scopes.add_at_least_one") }}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export default {
  name: "Scopes",
  computed: {
    ...mapState(["scopes", "scopesAtStart"]),
    ...mapGetters(["isScopeValid"]),
    checkedScopes: {
      get: function () {
        return this.$store.state.accompanyingCourse.scopes;
      },
      set: function (v) {
        this.$store.dispatch("setScopes", v).catch(({ name, violations }) => {
          if (name === "ValidationException" || name === "AccessException") {
            violations.forEach((violation) =>
              this.$toast.open({ message: violation }),
            );
          } else {
            this.$toast.open({ message: "An error occurred" });
          }
        });
      },
    },
  },
  methods: {
    localizeString,
    restore() {
      console.log("restore");
    },
  },
};
</script>

<style scoped></style>
