<template>
  <div
    class="snapshot-header"
    data-cy="snapshot-header">
    <h1>Snapshot {{ id }}</h1>
    <div class="snapshot-header__meta">
      {{ created }} – {{ snapshot.creator }}
    </div>

    <section class="snapshot-header__section">
      <h2 class="snapshot-header__subtitle">
        In diesem Snapshot sind {{ changesCount }} Anpassungen gespeichert:
      </h2>
      <ul class="snapshot-header__list">
        <li class="snapshot-header__list-item">{{ hiddenObjectives }} Lernziele wurden ausgeblendet
        </li>
        <li class="snapshot-header__list-item">{{ newObjectives }} Lernziele wurde erfasst</li>
        <li class="snapshot-header__list-item">{{ hiddenContentBlocks }} Inhaltsblöcke wurden
        ausgeblendet
        </li>
        <li class="snapshot-header__list-item">{{ newContentBlocks }} Inhaltsblock wurde erfasst</li>
      </ul>
    </section>

    <section class="snapshot-header__section">
      <h2 class="snapshot-header__subtitle">
        Willst du diesen Snapshot anwenden?
      </h2>
      <div>
        <checkbox
          :checked="agreement"
          data-cy="apply-checkbox"
          label="Ich will die Anpassungen aus diesem Snapshot in das Modul kopieren."
          @input="agreement = $event"/>
      </div>
    </section>

    <section class="snapshot-header__buttons snapshot-header__section">
      <button
        :disabled="!agreement"
        :class="{'button--disabled-alt': !agreement}"
        class="button button--primary"
        data-cy="apply-button"
        @click="apply">Snapshot anwenden
      </button>
      <button
        class="button button--secondary"
        @click="back">Abbrechen
      </button>
    </section>
  </div>
</template>

<script>
  import dateformat from '@/helpers/date-format';
  import Checkbox from '@/components/ui/Checkbox';

  import me from '@/mixins/me';

  import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
  import {MODULE_PAGE} from '@/router/module.names';

  const _getChange = (snapshot, index) => {
    try {
      return snapshot.changes[index];
    } catch (e) {
      return 0;
    }
  };

  export default {
    props: {
      snapshot: {
        type: Object,
        default: () => ({}),
      },
    },

    mixins: [me],

    components: {
      Checkbox,
    },

    data: () => ({
      agreement: false,
    }),

    computed: {
      created() {
        return dateformat(this.snapshot.created);
      },
      hiddenObjectives() {
        return _getChange(this.snapshot, 'hiddenObjectives');
      },
      newObjectives() {
        return _getChange(this.snapshot, 'newObjectives');
      },
      hiddenContentBlocks() {
        return _getChange(this.snapshot, 'hiddenContentBlocks');
      },
      newContentBlocks() {
        return _getChange(this.snapshot, 'newContentBlocks');
      },
      changesCount() {
        return this.hiddenObjectives + this.newObjectives + this.hiddenContentBlocks + this.newContentBlocks;
      },
      id() {
        try {
          return atob(this.snapshot.id).split(':')[1];
        } catch (e) {
          return '';
        }
      },
    },

    methods: {
      apply() {
        this.$apollo.mutate({
          mutation: APPLY_SNAPSHOT_MUTATION,
          variables: {
            input: {
              snapshot: this.snapshot.id,
              selectedClass: this.me.selectedClass.id,
            },
          },
        }).then(({data: {applySnapshot: {module: {slug}}}}) => {
          this.$router.push({
            name: MODULE_PAGE,
            params: {
              slug: slug,
            },
          });
        });
      },
      back() {
        this.$router.go(-1);
      },
    },
  };
</script>

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

  .snapshot-header {
    &__subtitle {
      @include heading-3;
      margin-bottom: $small-spacing;
    }

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

    &__list {
      padding-left: $small-spacing;
    }

    &__list-item {
      @include regular-text;
      line-height: 1.5;
      list-style-type: '–';
      padding-left: $small-spacing;
    }

    &__section {
      margin-bottom: $large-spacing;
    }

    &__buttons {

    }
  }
</style>
