<template>
  <div class="snapshots">
    <h1>Snapshots</h1>
    <p class="snapshots__details">Thema: {{ 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
        :key="snapshot.id"
        :snapshot="snapshot"
        class="snapshots__snapshot"
        v-for="snapshot in snapshots"
      />
    </div>
  </div>
</template>

<script>
  import SnapshotListItem from '@/components/modules/SnapshotListItem';

  import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
  import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';

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

  export default {
    components: {
      SnapshotTeamMenu,
      SnapshotListItem,
    },
    data() {
      return {
        module: defaultModule,
        selectedLink: 'mine',
      };
    },

    computed: {
      snapshots() {
        if (this.selectedLink === 'mine') {
          return this.module.snapshots.filter(snapshot => snapshot.mine);
        } else {
          return this.module.snapshots.filter(snapshot => snapshot.shared);
        }
      }
    },

    apollo: {
      module: {
        query: MODULE_SNAPSHOTS_QUERY,
        variables() {
          return {
            slug: this.$route.params.slug,
          };
        },
        error(error, vm, key, type, options) {
          console.log(error, vm, key, type, options);
        },
        update(data) {
          return data.module || defaultModule;
        },
      },
    },
  };
</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>
