<template>
  <div class="flyout">
      <navbar position="top" class="navbar-light amber lighten-1" scrolling>
        <mdb-navbar-brand>
          <div class="text-center icon-div">
            <fa icon="bars" size="lg" @click.native="handleBtnAClick()"></fa>
            <h4 style="padding-left: 10px; margin: 0; font-weight: 500" class="pull-right" align="center">monkeybars</h4>
          </div>
        </mdb-navbar-brand>
      <navbar-collapse>
        <navbar-nav right>
          <dropdown tag="li" class="nav-item">
            <dropdown-toggle color="transparent" @click.native="toggleDropdown(0)" tag="a" waves-fixed navLink>
              <img :src="isLoggedIn() ? profile.picture : '/static/face.jpg'" class="rounded-circle z-depth-1" width="35px" />
            </dropdown-toggle>
            <dropdown-menu v-show="activeDropdown[0]" right>
              <h6 v-if="isLoggedIn()" class="dropdown-header left">Signed in as {{profile.username}}</h6>
              <div class="dropdown-divider" v-if="isLoggedIn()"></div>
              <dropdown-item waves-fixed v-show="isLoggedIn()" @click.native="handleProfile()">Your profile</dropdown-item>
              <dropdown-item waves-fixed v-show="isLoggedIn()" @click.native="handleLogout()">Sign out</dropdown-item>
              <dropdown-item waves-fixed v-show="!isLoggedIn()" @click.native="handleLogin()">Sign in</dropdown-item>
            </dropdown-menu>
          </dropdown>
        </navbar-nav>
      </navbar-collapse>
    </navbar>
    <side-nav logo="/static/mdb-transparent.png"
              :OpenedFromOutside.sync="toggleA"
              color="blue-grey"
              hidden
              waves>
      <li>
        <ul class="social">
          <li><a href="#" class="icons-sm fb-ic"><fa icon="facebook" ></fa></a></li>
          <li><a href="#" class="icons-sm pin-ic"><fa icon="pinterest" ></fa></a></li>
          <li><a href="#" class="icons-sm gh-ic"><fa icon="google-plus" ></fa></a></li>
          <li><a href="#" class="icons-sm tw-ic"><fa icon="twitter" ></fa></a></li>
        </ul>
      </li>
      <li>
        <ul class="collapsible">
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 1 ? active = 0 : active = 1">
              <fa icon="chevron-right"></fa> Submit blog<fa icon="angle-down" class="rotate-icon" :class="active === 1 ? 'rotated' : ''"></fa></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <sub-menu tag="ul" v-if="active === 1" class="collapse-item">
          <li><a href="#" class="ripple-parent" @click="wave">Submit listing</a>
          </li>
          <li><a href="#" class="ripple-parent" @click="wave">Registration form</a>
          </li>
          </sub-menu>
          </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 2 ? active = 0 : active = 2">
              <fa icon="hand-pointer-o"></fa> Instruction<fa icon="angle-down" class="rotate-icon" :class="active === 2 ? 'rotated' : ''"></fa></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <sub-menu tag="ul" v-if="active === 2" class="collapse-item">
          <li><a href="#" class="ripple-parent" @click="wave">For bloggers</a>
          </li>
          <li><a href="#" class="ripple-parent" @click="wave">For authors</a>
          </li>
          </sub-menu>
          </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 3 ? active = 0 : active = 3">
              <fa icon="eye"></fa> About<fa icon="angle-down" class="rotate-icon" :class="active === 3 ? 'rotated' : ''"></fa></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <sub-menu tag="ul" v-if="active === 3" class="collapse-item">
          <li><a href="#" class="ripple-parent" @click="wave">Introduction</a>
          </li>
          <li><a href="#" class="ripple-parent" @click="wave">Monthly meetings</a>
          </li>
          </sub-menu>
          </transition>
          </li>
          <li>
            <a class="collapsible-header ripple-parent" @click="wave" @click.prevent="active === 4 ? active = 0 : active = 4">
              <fa icon="envelope-o"></fa> Contact me<fa icon="angle-down" class="rotate-icon" :class="active === 4 ? 'rotated' : ''"></fa></a>
            <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave">
              <sub-menu tag="ul" v-if="active === 4" class="collapse-item">
          <li><a href="#" class="ripple-parent" @click="wave">FAQ</a>
          </li>
          <li><a href="#" class="ripple-parent" @click="wave">Write a message</a>
          </li>
          </sub-menu>
          </transition>
          </li>
        </ul>
      </li>
    </side-nav>
    <main :style="{marginTop: '80px'}">
      <slot></slot>
    </main>
    <Ftr color="amber lighten-1">
      <p class="footer-copyright mb-0 py-3 text-center">
        &copy; {{new Date().getFullYear()}} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
      </p>
    </Ftr>
  </div>
</template>

<script>

  import { isLoggedIn, login, logout, getUserProfile } from '../../utils/auth';
  import Navbar from 'mdbvue/src/components/Navbar.vue';
  import NavbarItem from 'mdbvue/src/components/NavbarItem.vue';
  import NavbarNav from 'mdbvue/src/components/NavbarNav.vue';
  import NavbarCollapse from 'mdbvue/src/components/NavbarCollapse.vue';
  import mdbNavbarBrand from 'mdbvue/src/components/NavbarBrand.vue';
  import Ftr from 'mdbvue/src/components/Footer.vue';
  import EdgHd from 'mdbvue/src/components/EdgeHeader.vue';
  import Btn from 'mdbvue/src/components/Button.vue';
  import Fa from 'mdbvue/src/components/Fa.vue';
  import SideNav from 'mdbvue/src/components/pro/SideNav.vue';
  import SubMenu from 'mdbvue/src/components/pro/SubMenu.vue';
  import Dropdown from 'mdbvue/src/components/Dropdown.vue';
  import DropdownToggle from 'mdbvue/src/components/DropdownToggle.vue';
  import DropdownMenu from 'mdbvue/src/components/DropdownMenu.vue';
  import DropdownItem from 'mdbvue/src/components/DropdownItem.vue';
  import waves from 'mdbvue/src/mixins/waves';

  export default {
    name: 'app-nav',
    props: {
      waves: {
        type: Boolean,
        default: true
      }
    },
    components: {
      SideNav,
      Btn,
      Fa,
      SubMenu,
      Navbar,
      NavbarItem,
      NavbarNav,
      NavbarCollapse,
      mdbNavbarBrand,
      Ftr,
      EdgHd,
      Dropdown,
      DropdownToggle,
      DropdownMenu,
      DropdownItem
    },
    data() {
      return {
        profile: null,
        toggleA: false,
        active: 0,
        elHeight: 0,
        activeDropdown: {
          0: false
        }
      };
    },
    methods: {
      handleLogin() {
        login();
      },
      handleLogout() {
        logout();
      },
      handleProfile() {
        this.$router.push({ path: 'profile' });
      },
      isLoggedIn() {
        return isLoggedIn();
      },
      getUserInfo() {
        this.profile = getUserProfile();
      },
      handleBtnAClick() {
        this.toggleA = !this.toggleA;
      },
      enter(el) {
        el.style.height = this.elHeight + 'px';
      },
      beforeEnter(el) {
        this.elHeight = el.scrollHeight;
      },
      beforeLeave(el) {
        el.style.height = 0;
      },
      toggleDropdown(index) {
        for (let i = 0; i < Object.keys(this.activeDropdown).length; i++) {
          if (index !== i) {
            this.activeDropdown[i] = false;
          }
        }
        this.activeDropdown[index] = !this.activeDropdown[index];
      },
      allDropdownsClose(target) {
        for (let i = 0; i < Object.keys(this.activeDropdown).length; i++) {
          this.activeDropdown[i] = false;
        }
      },
      onClick(e) {
        let parent = e.target;
        let body = document.getElementsByTagName('body')[0];
        while (parent !== body) {
          if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
            return;
          }
          parent = parent.parentNode;
        }
        this.allDropdownsClose(e.target);
      }
    },
    mounted() {
      document.addEventListener('click', this.onClick);
    },
    created() {
      this.getUserInfo();
    },
    destroyed() {
      document.removeEventListener('click', this.onClick);
    },
    mixins: [waves]
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .flyout {
    display:flex;
    flex-direction: column;
    min-height:100vh;
    justify-content: space-between;
  }
  .collapsible {
    margin-top: 1rem;
  }
  .collapsible-header {
    position: relative;
  }
  .collapse-item {
    overflow: hidden;
    height: 0;
    padding: 0;
    transition: height .3s;
  }
  .collapse-item a {
    padding-left: 47px;
    line-height: 36px;
    background-color: rgba(0,0,0,.15);
  }
  .rotated {
    transform: rotate(180deg);
  }
  .no-padding {
    padding: 0 !important;
  }
</style>