<template>
  <div
    class="snapshot-menu"
    data-cy="snapshot-menu"
  >
    <a
      data-cy="module-snapshots-button"
      class="snapshot-menu__toggle"
      @click.stop="showPopover = true"
      >Snapshots</a
    >
    <widget-popover
      class="snapshot-menu__popover"
      v-if="showPopover"
      @hide-me="showPopover = false"
    >
      <a
        class="popover-links__link snapshot-menu__link snapshot-menu__button snapshot-menu__button--primary"
        data-cy="create-snapshot-button"
        @click="createSnapshot"
        >Neuen Snapshot erstellen</a
      >
      <router-link
        :to="snapshotListRoute"
        class="popover-links__link snapshot-menu__link"
      >
        Alle Snapshots anzeigen
      </router-link>
      <a
        class="popover-links__link snapshot-menu__link"
        href="https://myskillbox.ch/faq"
        >Was ist ein Snapshot?</a
      >
    </widget-popover>
  </div>
</template>

<script>
import WidgetPopover from '@/components/ui/WidgetPopover.vue';
import { SNAPSHOT_LIST } from '@/router/module.names';
import me from '@/mixins/me';

import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';
import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
import log from 'loglevel';
import { matomoTrackEvent } from '@/helpers/matomo-client';

export default {
  mixins: [me],

  components: {
    WidgetPopover,
  },

  data() {
    return {
      snapshotListRoute: {
        name: SNAPSHOT_LIST,
      },
      showPopover: false,
    };
  },

  methods: {
    createSnapshot() {
      this.$apollo
        .mutate({
          mutation: CREATE_SNAPSHOT_MUTATION,
          variables: {
            input: {
              module: this.$route.params.slug,
              selectedClass: this.me.selectedClass.id,
            },
          },
          update: (
            store,
            {
              data: {
                createSnapshot: { snapshot },
              },
            }
          ) => {
            const slug = this.$route.params.slug;
            const query = MODULE_SNAPSHOTS_QUERY;
            const variables = {
              slug,
            };
            const cached = store.readQuery({
              query,
              variables,
            });
            if (cached) {
              const { module } = cached;
              const data = {
                module: {
                  ...module,
                  snapshots: [snapshot, ...module.snapshots],
                },
              };
              store.writeQuery({
                query,
                variables,
                data,
              });
            }
          },
        })
        .then(
          ({
            data: {
              createSnapshot: { snapshot },
            },
          }) => {
            log.debug('snapshot created', snapshot);

            this.showPopover = false;
            this.$modal.open('snapshot-created', {
              snapshot,
            });
          }
        );
      matomoTrackEvent('Modul Snapshot', 'Snapshot erstellt', this.$route.params.slug);
    },
  },
};
</script>

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

.snapshot-menu {
  position: relative;

  &__toggle {
    @include regular-text;
    cursor: pointer;
  }

  &__popover {
    box-sizing: border-box;
    min-width: 300px;
    height: 170px;
    left: 0;
    top: 35px;
    padding: $medium-spacing;
  }

  &__link {
    @include large-link;
    line-height: 27px;
    padding: $small-spacing 0;
  }

  &__button {
    @include button-border;
    padding: 5px $small-spacing;
  }
}
</style>
