<template>
  <div class="objective-groups">
    <objective-group
      :key="group.id"
      :group="group"
      v-for="group in objectiveGroups"
      v-if="!group.hidden"
    />
  </div>
</template>

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

  export default {
    props: {
      groups: Array,
      control: {
        type: Boolean,
        default: false
      }
    },

    components: {
      ObjectiveGroup
    },

    apollo: {
      me: meQuery
    },

    data() {
      return {
        me: {
          permissions: []
        }
      };
    },

    computed: {
      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.permissions.includes('users.can_manage_school_class_content') || !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.shift(), {objectives});

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

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

  .objective-groups {
    margin-bottom: $large-spacing;
    display: flex;
    flex-direction: column;
  }
</style>
