<template>
  <div class="topic">
    <h1 class="topic__title">{{topic.title}}</h1>
    <p class="topic__teaser">
      {{topic.teaser}}
    </p>
    <div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo">
      <play class="topic__video-link-icon"></play>
      <span class="topic__video-link-description">Video schauen</span>
    </div>
    <div class="topic__modules">
      <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
    </div>
  </div>
</template>

<script>
  import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
  import Play from '@/components/icons/Play';
  import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';

  export default {
    components: {
      ModuleTeaser,
      Play
    },

    apollo: {
      topic() {
        return {
          query: TOPIC_QUERY,
          variables: {
            slug: this.$route.params.topicSlug
          },
          update(data) {
            return this.$getRidOfEdges(data).topic || {};
          }
        }
      }
    },

    computed: {
      modules() {
        return this.topic.modules;
      }
    },

    methods: {
      openVideo() {
        this.$store.dispatch('showFullscreenVideo', this.topic.vimeoId);
      }
    },

    data() {
      return {
        topic: {
          modules: {
            edges: []
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .topic {
    &__teaser {
      color: $color-charcoal-dark;
      width: 90%;
      @include lead-paragraph;
      margin-bottom: $large-spacing;
    }

    &__video-link {
      margin-bottom: $large-spacing;
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    &__video-link-icon {
      width: 40px;
      margin-right: $medium-spacing;
    }

    &__video-link-description {
      @include heading-3;
    }

    &__modules {
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      @supports (display: grid) {
        display: grid;
      }
      grid-column-gap: $large-spacing;
      grid-row-gap: $large-spacing;

      @include desktop {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
</style>
