<template>
  <div>
    <div class="nav-container" :class="{ open: isNavigationOpen }">
      <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
        <b-nav vertical>
          <template v-for="(navItem, index) in sideBar">
            <!-- Navigation items with no children -->
            <b-nav-item
              v-if="!navItem.children"
              :key="index"
              :to="navItem.route"
              :data-test-id="`nav-item-${navItem.id}`"
            >
              <component :is="navItem.icon" />
              {{ navItem.label }}
            </b-nav-item>

            <!-- Navigation items with children -->
            <li v-else :key="index" class="nav-item">
              <b-button
                v-b-toggle="`${navItem.id}`"
                variant="link"
                :data-test-id="`nav-button-${navItem.id}`"
              >
                {{ navItem.label }}
                <component :is="navItem.icon" class="icon-expand" />
                <!-- <icon-expand class="icon-expand" /> -->
              </b-button>
              <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav">
                <li class="nav-item">
                  <router-link
                    v-for="(subNavItem, i) of navItem.children"
                    :key="i"
                    :to="subNavItem.route"
                    :data-test-id="`nav-item-${subNavItem.id}`"
                    class="nav-link"
                  >
                    {{ subNavItem.label }}
                  </router-link>
                </li>
              </b-collapse>
            </li>
          </template>
        </b-nav>
      </nav>
    </div>
    <transition name="fade">
      <div
        v-if="isNavigationOpen"
        id="nav-overlay"
        class="nav-overlay"
        @click="toggleIsOpen"
      ></div>
    </transition>
  </div>
</template>

<script>
//Do not change Mixin import.
//Exact match alias set to support
//dotenv customizations.
import { AppNavigationMixin, KvmNavigationMixin } from './AppNavigationMixin';

export default {
  name: 'AppNavigation',
  mixins: [AppNavigationMixin, KvmNavigationMixin],
  data() {
    return {
      isNavigationOpen: false,
      server: 1,
      servers: [
        {
          value: 1,
          text: 'Сервер №1',
        },
        {
          value: 2,
          text: 'Сервер №2',
        },
      ],
    };
  },
  computed: {
    sideBar() {
      if (
        this.$route.path === '/console/settings' ||
        this.$route.path === '/operations/serial-over-lan' ||
        this.$route.path === '/operations/kvm'
      ) {
        return this.kvmNavigationItems;
      } else {
        return this.navigationItems;
      }
    },
  },
  watch: {
    $route: function () {
      this.isNavigationOpen = false;
    },
    isNavigationOpen: function (isNavigationOpen) {
      this.$root.$emit('change-is-navigation-open', isNavigationOpen);
    },
  },
  mounted() {
    this.$root.$on('toggle-navigation', () => this.toggleIsOpen());
  },
  methods: {
    toggleIsOpen() {
      this.isNavigationOpen = !this.isNavigationOpen;
    },
  },
};
</script>

<style scoped lang="scss">
svg {
  fill: currentColor;
  height: 1.2rem;
  width: 1.2rem;
  margin-left: 0 !important; //!important overriding button specificity
  vertical-align: text-bottom;
  &:not(.icon-expand) {
    margin-right: $spacer;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  padding-left: $spacer * 4;
  outline: none;
  box-sizing: border-box;
  height: 68px;
  border-top: 1px solid rgba(26, 62, 91, 0.2);
  &:not(.nav-link--current) {
    font-weight: normal;
  }
}

.nav-item__nav {
  list-style: none;
  padding-left: 0;
  margin-left: 0;

  .nav-item {
    outline: none;
  }

  .nav-link {
    display: flex;
    align-items: center;
    padding-left: $spacer * 4;
    outline: none;
    height: 68px;
    border-top: 1px solid rgba(26, 62, 91, 0.2);
    &:not(.nav-link--current) {
      font-weight: normal;
    }
  }
}

.server-form {
  height: 48px;
  width: 272px;
  border-radius: 8px;
  padding: 8px;
  background-color: $faint-secondary-primary-5;
}
.btn-link {
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none !important;
  border-radius: 0;
  height: 68px;
  border-top: 1px solid rgba(26, 62, 91, 0.2);
  font-weight: 600;
  line-height: 20px;
  &.not-collapsed {
    font-weight: 600;
    line-height: 20px;
  }
}

.icon-expand {
  margin: 0;
}

.btn-link,
.nav-link {
  position: relative;
  font-weight: $headings-font-weight;
  padding-left: $spacer; // defining consistent padding for links and buttons
  padding-right: $spacer;
  color: $text-primary;

  &:hover {
    background-color: $faint-secondary-primary-5-hover;
    color: theme-color('dark');
  }

  &:focus {
    background-color: $faint-secondary-primary-5-hover;
    box-shadow: none;
    color: theme-color('dark');
    outline: 0;
  }

  &:active {
    background-color: theme-color('secondary');
    color: $white;
  }
}

.nav-link--current {
  font-weight: $headings-font-weight;
  background-color: $red-brand-primary-5;
  color: $red-brand-primary;
  cursor: default;
  box-shadow: none;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background-color: $red-brand-primary;
  }

  &:hover,
  &:focus {
    background-color: $red-brand-primary-5;
    color: $red-brand-primary;
  }
}

.nav-container {
  position: fixed;
  width: $navigation-width;
  top: $header-height;
  bottom: 0;
  left: 0;
  z-index: 10;
  overflow-y: overlay;
  background-color: theme-color('light');
  transform: translateX(-$navigation-width);
  transition: transform $exit-easing--productive $duration--moderate-02;
  border-right: 1px solid rgba(19, 46, 68, 0.247);

  @include media-breakpoint-down(md) {
    z-index: $zindex-fixed + 2;
  }

  &.open,
  &:focus-within {
    transform: translateX(0);
    transition-timing-function: $entrance-easing--productive;
  }

  @include media-breakpoint-up($responsive-layout-bp) {
    transition-duration: $duration--fast-01;
    transform: translateX(0);
  }

  &::-webkit-scrollbar {
    position: absolute;
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    background: $faint-secondary-primary-20;
    border-radius: 16px;
    background-clip: content-box;
  }
}

.nav-overlay {
  position: fixed;
  top: $header-height;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $zindex-fixed + 1;
  background-color: $black;
  opacity: 0.5;

  &.fade-enter-active {
    transition: opacity $duration--moderate-02 $entrance-easing--productive;
  }

  &.fade-leave-active {
    transition: opacity $duration--fast-02 $exit-easing--productive;
  }

  &.fade-enter, // Remove this vue2 based only class when switching to vue3
  &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
  &.fade-leave-to {
    opacity: 0;
  }

  @include media-breakpoint-up($responsive-layout-bp) {
    display: none;
  }
}

.navbar__search_select_container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.server__icon {
  width: 20px;
  height: 20px;
}

.server-form {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 16px 1rem;
  height: 48px;
  width: 272px;

  .options {
    background-color: $white;
    height: 48px;
    width: 272px;
    border-radius: 8px;
  }
  option {
    background-color: $white;
    height: 48px;
    width: 272px;
    border-radius: 8px;
  }
}

.nav-line {
  height: 1px;
  width: 272px;
  border-bottom: 1px solid rgba(26, 62, 91, 0.2);
  margin: 0 1rem;
}

.server-pagination-select {
  margin: 0;
}

.server-select {
  font-weight: 500;
  line-height: 20px;
  width: 237px;
  border: none;
  height: 48px;
  background-image: url('../../../assets/images/_sila/icon-chevron.svg');
  &:focus {
    box-shadow: none;
  }

  .options {
    background-color: $white;
    height: 48px;
    width: 272px;
    border-radius: 8px;
  }
  option {
    background-color: $white;
    height: 48px;
    width: 272px;
    border-radius: 8px;
  }
}

.server-search {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  border: none;
  box-shadow: none;
  height: 40px;
  margin: 16px 1rem;
  width: 272px;
}

.search-button {
  border: none;
  background: none;
}

.nav-search__input {
  border: none;
  background: none;
  box-shadow: none;
}
</style>
