<template>
  <li>
    <router-link class="nav-link link" v-if="navigationItem.href && canRead(getItemName(navigationItem))" :to="{path: navigationItem.href}" :class="{'active': isActive }">
      <span class="active-line" />
      <span v-if="navigationItem.icon" class="nav-link-icon">
        <component :is="navigationItem.icon" />
      </span>
      <span class="nav-link-text">{{ navigationItem.label }}</span>
    </router-link>
    <button class="btn btn-block nav-link submenu-toggle link" v-else-if="navigationItem.items && canReadSome(navigationItem.items)" :class="{'active': hasActiveChildren }" @click="toggleChildren">
      <span>
        <span class="active-line" />
        <span class="nav-link-icon" v-if="navigationItem.icon">
          <component :is="navigationItem.icon" />
        </span>
        <span class="nav-link-text">{{ navigationItem.label }}</span>
      </span>
      <chevron-down-icon class="submenu-toggle-chevron" />
    </button>
    <transition name="slide">
      <template v-if="navigationItem.items">
        <ul class="subnav-list" v-if="childrenOpened">
          <li class="subnav-list-item" v-for="(child, index) in navigationItem.items" :key="index">
            <router-link class="nav-link" v-if="child.href && canRead(getItemName(child))" :to="{path: child.href}">
              <span v-if="child.icon" class="nav-link-icon">
                <component :is="child.icon" />
              </span>
              <span class="nav-link-text">{{ child.label }}</span>
            </router-link>
          </li>
        </ul>
      </template>
    </transition>
  </li>
</template>

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

const PermissionStore = namespace('permissions');

@Component
export default class NavigationSidebarItem extends Vue {
  @Prop(Object) readonly navigationItem!: NavigationItem;

  childrenOpened = false;

  @PermissionStore.Getter('canRead') readonly canRead!: (itemName: string) => boolean;

  toggleChildren() {
    this.childrenOpened = !this.childrenOpened;
  }

  get isActive() {
    return this.navigationItem.href && this.$route.path.includes(this.navigationItem.href);
  }

  get hasActiveChildren() {
    return this.navigationItem.items?.filter(item => item.href && this.$route.path.includes(item.href))?.[0];
  }

  getItemName(item: NavigationItem) {
    if (item.href === '/pages') {
      return 'CmsPage';
    }
    if (item.href === '/assets') {
      return 'CmsAsset';
    }

    // Cms docs and languages should always be available for anyone with CmsPage rights
    if (item.href === '/cms-docs' || item.href === '/language') {
      return 'CmsPage';
    }

    return item.factory && item.factory.name;
  }

  canReadSome(items: NavigationItem[]) {
    return items.some(item => {
      const itemName = this.getItemName(item);
      return itemName ? this.canRead(itemName) : false;
    });
  }
}
</script>

<style lang="scss" scoped>
  .link {
    position: relative;

    .active-line {
      position: absolute;
      width: 4px;
      height: 100%;
      top: 0;
      left: 0;
      background: transparent;
    }

    &.active {
      background-color: rgba(33, 37, 41, 0.05);

      & .active-line {
        background: #0072F8;
      }
    }
  }

  .submenu-toggle {
    border: 0;
    border-radius: 0;
    padding-right: .5rem;

    &-chevron {
      position: absolute;
      right: .5rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .nav-link {
    $icon-size: 24px;
    $icon-margin: 4px;

    padding: .5rem 2rem .5rem 1rem;
    width: 100%;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;

    &:hover {
      background-color: rgba(33,37,41, .05);
    }

    &-icon {
      width: $icon-size;
      height: $icon-size;
      margin-right: $icon-margin;
    }

    &-text {
      font-size: 14px;
    }
  }

  .subnav-list {
    margin: .5rem;
    list-style: none;
    padding: .5rem 0;
    background-color: rgba(33,37,41, .05);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &-item {
      display: flex;

      a.active {
        background-color: rgba(33,37,41, .05);
      }
    }
  }

  .slide {
    &-enter {
      transform: translateY(-10px);
      opacity: 0;
    }

    &-enter-active {
      transition: opacity .25s, transform .25s ease;
    }
  }
</style>
