<template>
<div>
<client-only>
<nav class="navbar navbar--simple __js-root">
  <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">

    <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
      <a href="/">
        <img src="https://styleguide.pirati.cz/latest//images/logo-round-white.svg" class="w-8" />
      </a>
      <span class="pl-4 font-bold text-xl lg:pr-8"><a href="/">{{ siteName }}</a></span>
    </div>

    <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
      <a href="#" @click="showNav = !showNav" class="no-underline hover:no-underline">
        <i class="ico--menu text-3xl"></i>
      </a>
    </div>

    <div v-if="showNav || isLgScreen()" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">

      <div class="flex-grow">
          <ul class="navbar-menu text-white" v-if="this.$auth.loggedIn">
          <li class="navbar-menu__item"><NuxtLink class="navbar-menu__link" to="/functions">Moji funkce</NuxtLink></li>
          <li class="navbar-menu__item"><NuxtLink class="navbar-menu__link" to="/agents">Moji zmocněnci</NuxtLink></li>
          <li class="navbar-menu__item"><NuxtLink class="navbar-menu__link" to="/profits">Moji přijmý</NuxtLink></li>
          </ul>
      </div>

      <div class="flex items-center space-x-4">
          <div class="flex items-center space-x-4" v-if="this.$auth.loggedIn">
            <span class="head-heavy-2xs">{{ this.$auth.user.name }}</span>
            <div class="avatar avatar--2xs">
              <img :src="'https://a.pirati.cz/piratar/300/'+this.$auth.user.preferred_username+'.jpg'" :alt="this.$auth.user.name" />
             </div>
            <a href="/logout"><button class="text-grey-200 hover:text-white" @click="Logout()"><i class="ico--log-out"></i></button></a>
          </div>
          <div class="flex items-center space-x-4" v-if="! this.$auth.loggedIn">
                  <button class="btn btn--icon btn--grey-125 btn--hoveractive" @click="Login()">
                    <div class="btn__body-wrap">
                      <div class="btn__body">Přihlásit se</div>
                      <div class="btn__icon">
                        <i class="ico--pirati"></i>
                      </div>
                    </div>
                  </button>
          </div>
      </div>
    </div>
  </div>
</nav>

<section class="container container--default py-8">
<Nuxt/>
</section>

</client-only>
</div>
</template>



<script>
export default {
  data () {
    return {
      siteName: process.env.SITENAME,
      showNav: true,
      config: {},
    }
  },

  created () {
    this.getConfig();
  },

  head () {
    return {
      link: [
        { rel: 'stylesheet', href: process.env.STYLEGUIDE }
      ]
    }
  },

  methods: {

    isLgScreen() {
        return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) > 900;
    },

    async getConfig() {
        this.config = await fetch(
            "https://iapi.pirati.cz/v1/groups",
            {
//                headers: {
//                    "Authorization": this.$cookie.get('auth._token.keycloak')
//                }
            }
        ).then(res => res.json() )
    },

    async Login() {
      console.log(this.$auth)

      try {
        this.$auth.loginWith('keycloak')
      } catch (err) {
        console.log(err)
      }
        console.log(this.$auth)
        console.log(this.$auth.user)
    },

    async Logout() {
      console.log(this.$auth)
      this.$auth.logout()
    }

  },


}
</script>