<template>
  <div class="objective-group objective-group-control">
    <h4>{{group.displayTitle}}</h4>

    <ul class="objective-group__objective-list objective-group__objective-list--no-list">
      <li v-if="objectives" class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
          <checkbox :checked="objective.done"
                :item="objective"
                :label="objective.text"
                @input="updateObjectiveProgress"
      ></checkbox>
      </li>
    </ul>
  </div>

</template>

<script>

  import Checkbox from '@/components/Checkbox';

  export default {
    name: 'objective-group-control',
    components: {Checkbox},

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

    methods: {
      updateObjectiveProgress(checked, objective) {
        this.$emit('updateObjectiveProgress', checked, objective.id);
      },
      objectiveIsDone(objective) {
        return objective.objectiveProgress.length > 0 && objective.objectiveProgress[0].done
      }
    },

    computed: {
      objectives() {
        return this.group.objectives.map(objective => {
          return Object.assign({}, objective, { done: this.objectiveIsDone(objective) })
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .objective-group__objective-list /deep/ {
    .base-input-container {

      position: relative;

      &__checkbox {
        background-color: white;
        position: absolute;
        top: 5px;
      }

      &__label {
        font-family: $serif-font-family;
        margin-left: 30px;
      }
    }
  }

</style>
