<template>
  <aside
    v-clickaway="close"
    class="wt-navigation-bar"
  >
    <wt-icon-btn
      :class="{ active: isOpened }"
      class="wt-navigation-bar__menu-btn"
      icon="menu"
      @click="isOpened = !isOpened"
    />
    <transition name="fade">
      <nav
        v-show="isOpened"
        class="wt-navigation-bar__nav wt-scrollbar"
      >
        <header class="wt-navigation-bar__nav-header">
          <!--        vue cli build target lib cant handle dynamic require :( -->
          <router-link
            :to="logoRoute"
            @click="close"
          >
            <img
              :alt="currentApp"
              :src="darkMode ? appLogo[currentApp].dark : appLogo[currentApp].light
                "
              class="wt-navigation-bar__app-pic"
            />
          </router-link>
          <wt-icon-btn
            class="wt-navigation-bar__nav-close"
            icon="close"
            @click="close"
          />
        </header>
        <wt-divider />
        <ul class="wt-navigation-bar__nav-list">
          <li
            v-for="(navItem, key) of nav"
            :key="key"
            class="wt-navigation-bar__nav-item"
          >
            <div v-if="!navItem.subNav">
              <div class="wt-navigation-bar__nav-item-wrapper">
                <router-link
                  :class="{
                    'wt-navigation-bar__nav-item-link--active':
                      currentNav.nav === navItem.value,
                  }"
                  :to="navItem.route"
                  class="wt-navigation-bar__nav-item-link typo-body-1"
                  @click="close"
                >
                  {{ navItem.name || navItem.value }}
                </router-link>
              </div>
            </div>
            <div v-else>
              <button
                :class="{
                  'wt-navigation-bar__nav-expansion--expanded':
                    isExpanded(navItem),
                  'wt-navigation-bar__nav-expansion--active':
                    currentNav.expansion === navItem.value,
                }"
                class="wt-navigation-bar__nav-expansion"
                type="button"
                @click="expand(navItem)"
              >
                <span class="wt-navigation-bar__nav-expansion-name typo-subtitle-1">{{
                  navItem.name || navItem.value
                  }}</span>
                <wt-icon
                  class="wt-navigation-bar__expansion-arrow"
                  color="active"
                  icon="arrow-right"
                />
              </button>
              <expand-transition>
                <ul v-if="isExpanded(navItem)">
                  <li
                    v-for="(subNavItem, subNavKey) of navItem.subNav"
                    :key="subNavKey"
                    class="wt-navigation-bar__nav-item"
                  >
                    <div class="wt-navigation-bar__nav-item-wrapper">
                      <router-link
                        :class="{
                          'wt-navigation-bar__nav-item-link--active':
                            currentNav.nav === subNavItem.value,
                        }"
                        :to="nestedRoute(subNavItem, navItem)"
                        class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                        @click="close"
                      >
                        {{ subNavItem.name || subNavItem.value }}
                      </router-link>
                    </div>
                  </li>
                </ul>
              </expand-transition>
            </div>
          </li>
        </ul>
      </nav>
    </transition>
  </aside>
</template>

<script lang="ts">
import { WtApplication } from '../../enums';
import ExpandTransition from '../transitions/wt-expand-transition.vue';
import AdminDark from './assets/dark/app-logo-dark-admin.svg';
import AuditDark from './assets/dark/app-logo-dark-audit.svg';
import CrmDark from './assets/dark/app-logo-dark-crm.svg';
import HistoryDark from './assets/dark/app-logo-dark-history.svg';
import SupervisorDark from './assets/dark/app-logo-dark-supervisor.svg';
import WfmDark from './assets/dark/app-logo-dark-wfm.svg';
import WorkspaceDark from './assets/dark/app-logo-dark-workspace.svg';
import AdminLight from './assets/light/app-logo-light-admin.svg';
import AuditLight from './assets/light/app-logo-light-audit.svg';
import CrmLight from './assets/light/app-logo-light-crm.svg';
import HistoryLight from './assets/light/app-logo-light-history.svg';
import SupervisorLight from './assets/light/app-logo-light-supervisor.svg';
import WfmLight from './assets/light/app-logo-light-wfm.svg';
import WorkspaceLight from './assets/light/app-logo-light-workspace.svg';
import { WtNavigationBarNavItem } from './types/WtNavigationBar';

const appLogo = {
	[WtApplication.Supervisor]: {
		dark: SupervisorDark,
		light: SupervisorLight,
	},
	[WtApplication.Admin]: {
		dark: AdminDark,
		light: AdminLight,
	},
	[WtApplication.Agent]: {
		dark: WorkspaceDark,
		light: WorkspaceLight,
	},
	[WtApplication.Audit]: {
		dark: AuditDark,
		light: AuditLight,
	},
	[WtApplication.History]: {
		dark: HistoryDark,
		light: HistoryLight,
	},
	[WtApplication.Crm]: {
		dark: CrmDark,
		light: CrmLight,
	},
	[WtApplication.Wfm]: {
		dark: WfmDark,
		light: WfmLight,
	},
};

export default {
	name: 'WtNavigationBar',
	components: {
		ExpandTransition,
	},
	props: {
		/**
		 * Currently opened app
		 * @type {string}
		 * @default 'admin'
		 */
		currentApp: {
			type: String,
			default: 'admin',
		},
		/**
		 * Should receive array of nav objects. All objects should have following properties:
		 * "value" -- main inner logic property, should be unique. "name" -- display name. If none,
		 * displays "value" property. "route" -- relative path, used for :to attr in router-link component.
		 * "subNav": array of objects, with properties, described above.
		 * If expansion has route, and subNav has route, subNav route computes like nav.route + / + subnav.route
		 * @type {Array}
		 * @default []
		 */
		nav: {
			type: Array,
			default: () => [],
		},
		/**
		 * Dark mode flag
		 * @type {boolean}
		 * @default false
		 */
		darkMode: {
			type: Boolean,
			default: false,
		},
		/**
		 * Logo route path
		 * @type {string}
		 * @default ''
		 */
		logoRoute: {
			type: String,
			default: '',
		},
	},
	data: () => ({
		isOpened: false,
		expandedName: '',
		appLogo,
	}),

	computed: {
		currentNav() {
			const pathSegments = this.$route.path.split('/').filter(Boolean);

			const flatNav = this.nav.flatMap(
				(item) =>
					item.subNav ?? [
						item,
					],
			);

			const navMap = new Map(
				flatNav.map((item) => [
					item.value,
					item,
				]),
			);

			const matchingSegment = pathSegments.find((segment) =>
				navMap.has(segment),
			);
			const currentNav = navMap.get(matchingSegment);

			const currentExpansion = this.nav.find((nav) =>
				nav.subNav?.includes(currentNav),
			);

			return {
				nav: currentNav?.value,
				expansion: currentExpansion?.value,
			};
		},
	},
	methods: {
		nestedRoute(subNavItem, navItem) {
			return navItem.route
				? `${navItem.route}/${subNavItem.route}`
				: subNavItem.route;
		},
		expand(navItem) {
			this.expandedName =
				this.expandedName !== navItem.value ? navItem.value : '';
		},
		isExpanded(navItem) {
			return this.expandedName === navItem.value;
		},
		close() {
			this.isOpened = false;
		},
	},
};
</script>

<style scoped>
.wt-navigation-bar__menu-btn {
  display: block;
  width: fit-content;
}

.wt-navigation-bar__nav {
  position: fixed;
  /* expand animation optimization */
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--wt-navigation-bar-z-index);
  box-shadow: var(--elevation-10);
  border-radius: var(--border-radius);
  background: var(--wt-navigation-bar-background-color);
  padding: var(--wt-navigation-bar-padding);
  width: var(--wt-navigation-bar-width);
  overflow: auto;
}

.wt-navigation-bar__nav * {
  transform: translateZ(0);
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: height;
}

.wt-navigation-bar__nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wt-navigation-bar-header-padding);
}

.wt-navigation-bar__app-pic {
  width: auto;
  height: var(--wt-navigation-bar-app-pic-height);
}

.wt-navigation-bar__nav-item-link {
  display: block;
  transition: var(--transition);
  padding: var(--wt-navigation-bar-link-padding);
  word-wrap: break-word;
  color: var(--wt-navigation-bar-option-text-color);
}

.wt-navigation-bar__nav-item-link:hover {
  background: var(--wt-navigation-bar-option-background-hover-color);
}

.wt-navigation-bar__nav-item-link--active {
  background: var(--wt-navigation-bar-option-background-active-color);
  color: var(--wt-navigation-bar-option-text-active-color);
}

.wt-navigation-bar__nav-expansion {
  font-family: 'Montserrat', monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-transform: none;
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  outline: none;
  padding: var(--wt-navigation-bar-link-padding);
  width: 100%;
  color: var(--wt-navigation-bar-option-text-color);
}

.wt-navigation-bar__nav-expansion::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: var(--transition);
  border-radius: var(--border-radius);
  background: var(--wt-navigation-bar-expansion-ribbon-color);
  width: var(--wt-navigation-bar-active-expansion-flag-width);
  content: '';
}

.wt-navigation-bar__nav-expansion--expanded::before,
.wt-navigation-bar__nav-expansion--active::before {
  opacity: 1;
}

.wt-navigation-bar__nav-expansion--expanded .wt-navigation-bar__expansion-arrow {
  transform: rotate(90deg);
}

.wt-navigation-bar__nav-expansion .wt-navigation-bar__expansion-arrow {
  transition: var(--transition);
}

.wt-navigation-bar__nav-expansion-name {
  display: block;
  max-width: var(--wt-navigation-bar-active-expansion-name-max-width);
  word-wrap: break-word;
}

.wt-navigation-bar__nav-item-link--subnav {
  padding-left: var(--wt-navigation-bar-subnav-padding-left);
}
</style>
