<template>
  <v-app>
    <v-overlay :value="$apollo.queries.me.loading" z-index="9">
      <v-progress-circular color="ifms" indeterminate size="120" />
    </v-overlay>
    <component :is="layout" />
    <v-snackbar
      v-model="snackbar"
      color="primary"
      multi-line
      :timeout="10000"
      top
    >
      {{ message }}
      <v-btn text icon @click="snackbar = false">
        <v-icon> mdi-close </v-icon>
      </v-btn>
    </v-snackbar>
  </v-app>
</template>

<script>
import Default from './layouts/Default'
import Simple from './layouts/Simple'
import gql from 'graphql-tag'

export default {
  name: 'App',
  components: {
    Default,
    Simple
  },
  data: () => ({
    snackbar: false
  }),

  apollo: {
    me: {
      skip() {
        return this.$route.name == 'login'
      },
      query: gql`
        {
          me {
            sAMAccountName
            displayName
          }
        }
      `
    }
  },

  computed: {
    layout() {
      return this.$route.meta.layout || 'Default'
    },
    message() {
      return this.$route.params.message
    }
  },

  watch: {
    message(message) {
      this.snackbar = !!message
    }
  },
  mounted() {
    if (
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      this.$vuetify.theme.dark = true
    }
  }
}
</script>
