<template>
  <div class="module-page">
    <module-navigation></module-navigation>
    <module :module="module"></module>
  </div>
</template>

<script>
  import Module from '@/components/Module.vue';
  import ModuleNavigation from '@/components/ModuleNavigation.vue';
  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';

  export default {
    apollo: {
      moduleQuery: {
        query: MODULE_DETAILS_QUERY,
        variables: {
          slug: 'video'
        },
        fetchPolicy: 'network-only',
        manual: true,
        result({data, loading, networkStatus}) {
          if (!loading) {
            const cleanedData = this.$getRidOfEdges(data)
            this.module = cleanedData.modules[0] || {};
          }
        }
      }
    },

    components: {
      Module,
      ModuleNavigation
    },

    // TODO: can we do better by defining a type for module?
    data() {
      return {
        module: {
          objectivegroupSet: {
            edges: {}
          },
          chapters: {
            edges: {}
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .module-page {
    display: grid;
    justify-items: center;
    grid-template-columns: 2fr 6fr 2fr;
    
    /*
     * For IE10+
     */
    display: -ms-grid;
    -ms-grid-columns: 2fr 6fr 2fr;

    & > :nth-child(1) {
      -ms-grid-column: 1;
      -ms-grid-column-align: center;
    }
    & > :nth-child(2) {
      -ms-grid-column: 2;
      -ms-grid-column-align: center;
    }
  }
</style>
