<template>
  <div id="sidebar" class="component component-sidebar" :class="{ open: !!open }">
    <div class="main-container">
      <div class="navigation">
        <div class="top">
          <router-link class="logo" to="/">
            <img src="/images/logo.png" />
          </router-link>
          <div class="profile-name">
            <div class="icon-container">
              <i class="fas fa-user-circle fa-fw"></i>
            </div>
            <div class="name">

            </div>
          </div>
        </div>
        <div class="menu">
          <div class="main-items">
            <router-link class="item" to="/" exact>Dashboard</router-link>
            <router-link class="item" to="/customization">Customization</router-link>
            <router-link class="item" to="/pages">Pages</router-link>
            <router-link class="item" to="/posts">Posts</router-link>
            <router-link class="item" to="/vault">Vault</router-link>
            <a class="item more" :class="{ active: !!showMore }" @click="showMore = !showMore">
              <span v-if="!showMore">More</span>
              <span v-else>Less</span>
              &nbsp;
              <i class="far" :class="{ 'fa-angle-down': !showMore, 'fa-angle-up': !!showMore }"></i>
            </a>
            <div class="more-items" v-show="!!showMore">
              <router-link class="item" to="/events">Events</router-link>
              <router-link class="item" to="/file-library">File Library</router-link>
              <router-link class="item" to="/categories-tags">Categories & Tags</router-link>
              <router-link class="item" to="/users">Users</router-link>
              <router-link class="item" to="/settings">Settings</router-link>
              <router-link class="item" to="/admin-settings">Super Admin</router-link>
            </div>
          </div>
          <div class="last-items">
            <a class="button" @click="logout()">Log Out</a>
          </div>
        </div>
        <div class="icons-container">
          <a id="close_icon" class="icon-container" @click="open = !open">
            <i class="far fa-fw" :class="{ 'fa-times' : !!open, 'fa-bars': !open}"></i>
          </a>
          <a id="public_icon" class="icon-container" :href="publicLink">
            <i class="far fa-globe fa-fw"></i>
          </a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios';
  import { post } from '../helpers/api.js';

  export default {
    data() {
      return {
        open: true,
        showMore: this.$route.meta.view === "General Settings" || this.$route.meta.view === "Super Admin Settings" || this.$route.meta.view === "File Library"
      };
    },
    computed: {
      publicLink() {
        if (!!this.$route && !!this.$route.meta && this.$route.meta.view && this.$route.meta.view === "Page") {
          return document.location.origin + this.$route.params.slug;
        }
        else {
          return document.location.origin;
        }
      }
    },
    methods: {
      logout() {
        axios({
          method: 'POST',
          url: "/logout",
          data: null,
          headers: {
            'Authorization': `Bearer ` + window.jwtToken,
            "X-CSRFToken": window.csrfToken
          }
        })
          .then( () => {
            delete window.jwtToken;
            delete window.csrfToken;
            window.location.reload(true);
          })
          .catch( () => {
            delete window.jwtToken;
            delete window.csrfToken;
            window.location.reload(true);
          });
      }
    }
  }
</script>
