<template>
  <div class="activity-list">
    <template v-for="topic in topics">
      <template v-for="module in topic.modules">
        <div
          class="activity__module"
          v-if="module[property]?.length"
          :key="module.id"
        >
          <h4 class="heading-4">{{ topic.title }}: {{ module.title }} - {{ module.metaTitle }}</h4>
          <activity-entry
            :to="`/${path(item)}`"
            v-for="item in module[property]"
            :key="item.id"
          >
            <slot :item="item"></slot>
          </activity-entry>
        </div>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ActivityProperty } from '@/@types';
import ActivityEntry from '@/components/profile/ActivityEntry.vue';
import { AnswerNode, BookmarkNode, HighlightNode, StudentSubmissionNode, TopicNode } from '@/__generated__/graphql';
export interface Props {
  topics: TopicNode[];
  property: ActivityProperty;
}
const props = defineProps<Props>();

const isHighlight = (value: any): value is HighlightNode => {
  return props.property === 'myHighlights';
};
const isAssignment = (value: any): value is StudentSubmissionNode => {
  return props.property === 'mySubmissions';
};
const isSurvey = (value: any): value is AnswerNode => {
  return props.property === 'myAnswers';
};

const path = (item) => {
  if (isHighlight(item)) {
    return item.page.path;
  } else if (isAssignment(item)) {
    return item.assignment.path;
  } else if (isSurvey(item)) {
    return item.survey.path;
  } else {
    return (item as BookmarkNode).path;
  }
};
</script>
