<template>
  <div
    :class="{ 'hideable-element--greyed-out': hidden }"
    class="objective-group hideable-element"
    v-if="editMode || !hidden"
  >
    <visibility-action
      :block="group"
      :type="type"
      v-if="editMode"
    />

    <h4>{{ group.displayTitle }}</h4>

    <ul class="objective-group__objective-list">
      <objective
        :objective="objective"
        class="objective-group__objective"
        :edit-mode="editMode"
        v-for="objective in group.objectives"
        :key="objective.id"
      />
    </ul>
    <add-content-button
      :parent="group"
      :where="{ parent: group }"
      v-if="editMode"
    />
  </div>
</template>

<script>
import Objective from '@/components/objective-groups/Objective.vue';
import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
import AddContentButton from '@/components/AddContentButton.vue';

import me from '@/mixins/me';

import { OBJECTIVE_GROUP_TYPE } from '@/consts/types';
import { hidden } from '@/helpers/visibility';

export default {
  props: {
    group: {
      required: true,
      type: Object,
    },
  },

  mixins: [me],

  components: {
    AddContentButton,
    Objective,
    VisibilityAction,
  },

  data() {
    return {
      type: OBJECTIVE_GROUP_TYPE,
    };
  },

  computed: {
    editMode() {
      return this.group.module?.inEditMode || false;
    },
    hidden() {
      return hidden({
        block: this.group,
        schoolClass: this.schoolClass,
        type: this.type,
      });
    },
  },
};
</script>

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

.objective-group {
  position: relative;

  &__actions {
    position: absolute;
    left: -70px;
    top: -4px;
    display: grid;
  }
}
</style>
