<template>
  <main>
    <Layout class="layout">
      <Menu theme="light" mode="horizontal">
        <MenuItem v-if="!hasUser" name="user">
          <span @click="() => { doLogin(); }">Login</span>
        </MenuItem>
        <Submenu v-if="hasUser" name="user">
          <template slot="title">
            <Avatar :src="user.picture" />
            {{ user.name }}
          </template>
          <nuxt-link to="/logout/">
            <DropdownItem>
              Log out
            </DropdownItem>
          </nuxt-link>
        </Submenu>
      </Menu>
      <Content>
        <nuxt />
      </Content>
    </Layout>
  </main>
</template>

<style lang="scss">
// We need this line to import all global styling
@import "assets/scss/global.scss";
</style>

<style lang="scss" scoped>
.layout {
  background-color: white;

  .log-out {
    cursor: pointer;
  }
}
</style>

<script>
import auth from "~/utils/auth";

export default {
  data() {
    return {
      user: undefined
    };
  },
  computed: {
    hasUser() {
      return this.user;
    }
  },
  watch: {
    "$route.path"() {
      this.fetchUser();
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      this.user = auth.getUserInfo();
    },
    doLogin() {
      auth.triggerLogin({ returnUrl: this.$route.fullPath });
    }
  }
};
</script>
