<template>
  <div class="snapshots">
    <h1>Snapshots</h1>
    <p class="snapshots__details">
      {{ $flavor.textTopic }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
    </p>
    <snapshot-team-menu
      :selected="selectedLink"
      @select="selectedLink = $event"
    />
    <div
      data-cy="snapshot-list"
      class="snapshots__list"
    >
      <snapshot-list-item
        :snapshot="snapshot"
        class="snapshots__snapshot"
        v-for="snapshot in snapshots"
        :key="snapshot.id"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useQuery } from '@vue/apollo-composable';

import SnapshotListItem from '@/components/modules/SnapshotListItem.vue';
import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu.vue';
import { useRoute } from 'vue-router';
import { graphql } from '@/__generated__';

const defaultModule = { topic: {}, snapshots: [] };

const selectedLink = ref('mine');

const route = useRoute();

const { result } = useQuery(
  graphql(`
    query ModuleSnapshotsQuery($slug: String!) {
      module(slug: $slug) {
        id
        title
        metaTitle
        slug
        topic {
          title
        }
        snapshots {
          ...SnapshotDetailsFragment
        }
      }
    }
  `),
  {
    slug: route.params.slug as string,
  }
);

const module = computed(() => result.value?.module || defaultModule);

const snapshots = computed(() => {
  if (selectedLink.value === 'mine') {
    return module.value.snapshots.filter((snapshot) => snapshot.mine);
  } else {
    return module.value.snapshots.filter((snapshot) => snapshot.shared);
  }
});
</script>

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

.snapshots {
  @include centered(800px);
  display: flex;
  flex-direction: column;
  padding: $section-spacing 0;
  align-items: flex-start;

  &__details {
    @include regular-text;
    margin-bottom: $large-spacing;
  }

  &__list {
    width: 100%;
  }

  &__snapshot {
    @include table-row;
  }
}
</style>
