<template>
  <div class="objective-groups">
    <template v-for="group in filteredObjectiveGroups">
      <objective-group
        :group="group"
        v-if="group.objectives.length"
        :key="group.id"
      />
    </template>
  </div>
</template>

<script>
import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup.vue';
import { meQuery } from '@/graphql/queries';

export default {
  props: {
    groups: {
      type: Array,
      default: () => [],
    },
  },

  components: {
    ObjectiveGroup,
  },

  apollo: {
    me: meQuery,
  },

  data() {
    return {
      me: {},
    };
  },

  computed: {
    filteredObjectiveGroups() {
      return this.objectiveGroups.filter((g) => !g.hidden);
    },
    objectiveGroups() {
      /*
         a teacher should get multiple blocks, so he can manage the visibility for his students.
         students don't care about the blocks, so they should get just one block that contains all the objectives
         */
      if (this.me.isTeacher || !this.groups.length) {
        return this.groups;
      } else {
        // todo: maybe this can be done a bit more elegantly
        let groups = this.groups;
        const objectives = groups.map((g) => g.objectives).flat(); // get all objectives in one array
        const firstGroup = Object.assign({}, groups[0], { objectives });

        return [firstGroup];
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.objective-groups {
  margin-bottom: $large-spacing;
  display: flex;
  flex-direction: column;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
