import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";

export default {
  components: { Assignment, AssignmentTags },
  template: `
    <section id="section-1" v-show="assignments.length">
    <h2 class="font-bold mb-2">{{ title }} <span>({{ assignments.length }})</span> </h2>

    <assignment-tags 
    :initTags = "assignments.map(a => a.tag)" 
    :current-tag = "currentTag" 
    @change="currentTag = $event"

    />

    <ul class="mt-6">
        <assignment v-for="assignment in assignments" :key="assignment.id" :assignment="assignment"/>
    </ul>
</section>
    `,

  props: {
    assignments: Array,
    title: String,
  },

  data() {
    return {
      currentTag: "all",
    };
  },

  computed: {
    filteredAssignments() {
      return this.assignments.filter(
        (a) => a.tag === this.currentTag || this.currentTag === "all"
      );
    },

    tags() {
      return new Set(this.assignments.map((a) => a.tag));
    },
  },
};