<template>
  <div
    class="snapshot-menu"
    data-cy="snapshot-menu">
    <a
      data-cy="module-snapshots-button"
      class="snapshot-menu__toggle"
      @click="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">Was ist ein Snapshot?</a>
    </widget-popover>
  </div>
</template>

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

  import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';

  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,
            },
          },
        }).then(({data: {createSnapshot: {snapshot}}}) => {
          this.showPopover = false;
          this.$modal.open('snapshot-created', {
            snapshot
          });
        });
      },
    },
  };
</script>

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

  .snapshot-menu {
    position: relative;

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

    &__popover {
      box-sizing: border-box;
      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>
