<template>
  <header class="header-bar">
    <top-navigation></top-navigation>
    <router-link to="/" class="header-bar__logo" data-cy="home-link">
      <logo></logo>
    </router-link>
    <div class="user-header">
      <class-selection-widget />
      <user-widget v-bind="me"></user-widget>
    </div>
    <book-navigation v-if="showSubnavigation">
    </book-navigation>
  </header>
</template>

<script>
  import TopNavigation from '@/components/TopNavigation.vue';
  import BookNavigation from '@/components/book-navigation/BookNavigation';
  import UserWidget from '@/components/UserWidget.vue';
  import LogoutWidget from '@/components/LogoutWidget.vue';
  import Logo from '@/components/icons/Logo';
  import ClassSelectionWidget from '@/components/ClassSelectionWidget';

  import ME_QUERY from '@/graphql/gql/meQuery.gql';

  export default {
    components: {
      TopNavigation,
      UserWidget,
      LogoutWidget,
      BookNavigation,
      Logo,
      ClassSelectionWidget
    },

    computed: {
      showSubnavigation() {
        return this.$route.meta.subnavigation;
      }
    },

    data() {
      return {
        me: {}
      }
    },

    apollo: {
      me: {
        query: ME_QUERY,
      },
    },
  }
</script>

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

  .header-bar {
    display: -ms-grid;
    @supports (display: grid) {
      display: none;

      @include desktop {
        display: grid;
      }
    }
    align-items: center;
    justify-content: space-around;
    background-color: $color-white;
    grid-auto-rows: 50px;
    width: 100%;

    @include desktop {
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: auto;
    }

    /*
     * For IE10+
     */
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 50px 50px;

    /*
    * For IE10+
    */
    & > :nth-child(1) {
      -ms-grid-column: 1;
      -ms-grid-row-align: center;
    }

    /*
    * For IE10+
    */
    & > :nth-child(3) {
      -ms-grid-column: 3;
      -ms-grid-row-align: center;
      -ms-grid-column-align: end;

      justify-self: end;
    }

    & > :nth-child(4) {
      -ms-grid-row: 2;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
    }

    &__logo {
      color: #17A887;
      font-size: 36px;
      font-weight: 800;
      font-family: $sans-serif-font-family;
      display: flex;
      justify-self: center;

      /*
      * For IE10+
      */
      -ms-grid-column: 2;
      -ms-grid-row-align: center;
      -ms-grid-column-align: center;
    }
  }

  .user-header {
    display: flex;
  }
</style>
