<template>
  <transition name="slide-in">
    <div class="sidebar h-100 print-hidden" v-if="navigation.items && opened">
      <nav class="sidebar-content h-100 d-flex flex-column justify-content-between">
        <ul class="navigation-list top-nav">
          <navigation-sidebar-item v-for="(item, index) in navigation.items" :navigation-item="item" :key="index" />
          <multi-language-only>
            <navigation-sidebar-item :navigation-item="systemNavigationItems.LANGUAGE_PAGE_TRANSLATION_ITEM" />
          </multi-language-only>
        </ul>
        <ul class="navigation-list bottom-nav bg-white py-2 mb-0">
          <template v-if="navigation.bottomItems">
            <navigation-sidebar-item v-for="(item, index) in navigation.bottomItems" :navigation-item="item" :key="index" />
          </template>
          <li class="nav-link d-flex justify-content-between">
            <span>V {{ packageVersion }}</span>
            <span class="badge badge-warning">{{ environment }}</span>
          </li>
        </ul>
      </nav>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import NavigationSidebarItem from './navigation-sidebar-item.vue';
import { Navigation } from '../types/settings';
import localStorage, { LocalStorageKeys } from '../tools/local-storage';

// Multi-language
import MultiLanguageOnly from './language/multi-language-only.vue';
import { SYSTEM_NAVIGATION_ITEMS } from '../tools/route-utils';

const DataStore = namespace('data');

@Component({
  components: {
    NavigationSidebarItem,
    // Multi-language
    MultiLanguageOnly
  }
})
export default class NavigationSidebar extends Vue {
  @Prop(Object) navigation!: Navigation;

  opened = true;
  isTest = true;

  @DataStore.State('packageVersion') readonly packageVersion!: string;

  beforeMount() {
    const sidebarOpened = localStorage.get<boolean>(LocalStorageKeys.SidebarOpened);
    if (sidebarOpened !== null) {
      this.opened = sidebarOpened;
    }
  }

  mounted() {
    const isCmsProduction = document.documentElement.dataset.isCmsProduction?.toLowerCase();
    this.isTest = isCmsProduction === 'false' || isCmsProduction === '';
  }

  toggleSidebar() {
    this.opened = !this.opened;
  }

  get environment() {
    return this.isTest ? 'Test' : 'Productie';
  }

  get systemNavigationItems() {
    return SYSTEM_NAVIGATION_ITEMS;
  }

  @Watch('opened')
  openedChanged() {
    localStorage.set(LocalStorageKeys.SidebarOpened, this.opened.toString());
  }
}

</script>

<style lang="scss" scoped>
@import '../variables';

.sidebar {
  padding-top: 1rem;
  flex: 0 0 $sidebar-width;
  max-width: $sidebar-width;
  position: relative;
  border-right: 1px solid $border-color;

  .navigation-list {
    list-style: none;
    padding: 0;
  }

  .top-nav {
    height: 100%;
    overflow-y: auto;
  }

  .bottom-nav {
    border-top: 1px solid $border-color;

    .badge {
      display: flex;
      align-items: center;
    }
  }
}

.slide-in-enter-active,
.slide-in-leave-active {
  transition: all .3s ease-in-out;
  margin-left: 0;
}

.slide-in-enter,
.slide-in-leave-to {
  margin-left: -$sidebar-width;
}
</style>
