<template>
  <div
    class="onboarding__content"
    data-cy="onboarding-page"
  >
    <router-view />
    <a
      class="onboarding__button button button--primary button--big"
      data-cy="onboarding-next-link"
      @click="next"
    >{{ nextLabel }}
    </a>
    <a
      class="onboarding__secondary-link"
      data-cy="onboarding-skip-link"
      @click.prevent="completeOnboarding"
    >Einführung überspringen</a>
  </div>
</template>

<script>

  import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
  import ME_QUERY from '@/graphql/gql/queries/meQuery';

  export default {
    computed: {
      nextLabel() {
        return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter';
      },
      illustration() {
        return this.$route.meta.illustration;
      },
    },

    methods: {
      next() {
        const next = this.$route.meta.next;
        if (next === 'home') {
          this.completeOnboarding();
        } else {
          this.$router.push({name: next});
        }
      },
      completeOnboarding() {
        this.$apollo.mutate({
          mutation: UPDATE_ONBOARDING_PROGRESS,
          update(store, {data: {updateOnboardingProgress: {success: onboardingVisited}}}) {
            const query = ME_QUERY;
            const {me} = store.readQuery({query});
            if (me) {
              const data = {
                me: {
                  ...me,
                  onboardingVisited
                }
              };
              store.writeQuery({query, data});
            }
          },
        }).then(() => {
          this.$router.push({name: 'home'});
        });
      },
    },
  };
</script>

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

  .onboarding {
    background-color: $color-brand;

    display: flex;
    position: relative;

    &--illustration {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 50%;
        background: $color-brand-dark;
      }
    }

    &__illustration {
      width: 30vw;
      min-width: 400px;
      align-self: center;
      background-color: $color-brand;
      z-index: 1;
      display: none;

      @include desktop {
        display: flex;
        justify-content: center;
      }
    }

    &__content {
      background-color: $color-white;
      padding: $medium-spacing;
      display: flex;
      flex-direction: column;
      z-index: 1;

      @include desktop {
        padding: 2*$large-spacing;
      }
    }

    &__logo {
      max-width: 300px;
      height: 50px;
      margin-bottom: $large-spacing;

      @include desktop {
        margin-bottom: 70px;
      }
    }

    &__page-subheading {
      @include regular-text;
      color: $color-brand;
      margin-bottom: $small-spacing;
    }

    &__page-heading {
      @include heading-2;
      color: $color-brand;
      margin-bottom: 2*$large-spacing;
    }

    &__heading {
      @include heading-2;
      margin-bottom: $small-spacing;
    }

    &__claim {
      @include heading-2;
      margin-bottom: 70px;
    }

    &__paragraph {
      @include regular-text;
      margin-bottom: $medium-spacing;

      &:last-of-type {
        margin-bottom: 2*$large-spacing;
      }
    }

    &__button {
      @include regular-text;
      flex-grow: 0;
      align-self: flex-start;
      min-width: 150px;
      display: inline-flex;
      box-sizing: border-box;
      justify-content: center;
      margin-bottom: $large-spacing;
      cursor: pointer;
    }

    &__secondary-link {
      @include inline-title;
      cursor: pointer;

      @include desktop {
        margin-top: auto;
      }
    }
  }
</style>
