<template>
  <ul class="l-nav-side-section">
    <li>
      <span
        class="l-nav-side-section-title"
      >
        <div
          class="l-nav-side-section-title-links-full"
          @click="visitSideSection"
          @mouseenter="linkHovered = true"
          @mouseleave="linkHovered = false" 
        >
          <div
            class="l-nav-side-section-title-icon"
            :class="[
              childLinkActive || parentLinkActive
                ? 'l-nav-side-section-title-icon--active'
                : null,
            ]"
          >
            <l-icon
              size="5"
              class="l-nav-side-section-title-icon--icon"
            >
              <slot
                v-if="linkHovered || childLinkActive || parentLinkActive"
                name="active-icon"
              />
              <slot
                v-else
                name="icon"
              />
            </l-icon>
          </div>
          <div
            :class="
              childLinkActive || parentLinkActive
                ? 'l-nav-side-section-title-icon--active'
                : ''
            "
            class="link-title"
          >
            <div>{{ link.title }}</div>
            <div
              class="link-underline"
              :class="
                linkHovered || childLinkActive || parentLinkActive
                  ? 'link-underline-slide-in'
                  : ''
              "
              :style="childLinkActive || parentLinkActive ? 'background: var(--l-nav-side-highlight)' : ''"
            />
          </div>
        </div>
      </span>
      <div v-if="link.links">
        <ul class="l-nav-side-section-title-hover-children-list-full">
          <l-nav-child-link
            v-for="(childLink, i) in link.links"
            :key="i"
            :child-link="childLink"
          />
        </ul>
      </div>
    </li>
    <slot />
  </ul>
</template>

<script>
import LIcon from "../atoms/LIcon.vue";
import LNavChildLink from "../atoms/LNavChildLink.vue";
export default {
  components: {
    LIcon,
    LNavChildLink
  },
  props: {
    /**
     * Link object
     */
    link: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      linkHovered: false,
    }
  },
  computed: {
    childLinkActive() {
      if (this.link.links) {
        return this.link.links.some((link) => {
          // On a refresh Nuxt sometimes adds a forward slash at the end of the URL, thus we need to check for both cases below
          return link.to === this.$route.path || link.to === this.$route.matched[0].path;
        });
      } else {
        return false;
      }
    },
    parentLinkActive() {
      // On a refresh Nuxt sometimes adds a forward slash at the end of the URL, thus we need to check for both cases below
      return this.link.to === this.$route.path || this.link.to === this.$route.matched[0].path;
    },
    titleHoverShowWidth() {
      return this.link.links
        ? "calc(var(--spacing-52) + var(--spacing-2))"
        : "100%";
    },
    titleHoverShowAlignment() {
      return this.link.links ? "revert" : "center";
    },
    titleHoverShowBorder() {
      return this.link.links
        ? "var(--radius-md) var(--radius-md) 0"
        : "var(--radius-md)";
    },
    titleHoverShowStyle() {
      return {
        "--title-hover-show-width": this.titleHoverShowWidth,
        "--title-hover-show-alignment": this.titleHoverShowAlignment,
        "--title-hover-show-border": this.titleHoverShowBorder,
      };
    },
  },
  methods: {
    visitSideSection() {
      if (this.link.to) {
        this.$router.push(`${this.link.to}`);
      }
    },
  },
};
</script>

<style>
.l-nav-side-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--sizing-sm);
  height: var(--spacing-7);
  position: relative;
}
.l-nav-side-section-title:hover .link-title {
  font-weight: 600;
  transition: all var(--duration-300) ease-in-out;
}
.l-nav-side-section-title:hover .l-nav-side-section-title-icon--active {
  font-weight: 800;
}
.l-nav-side-section-title-links-full {
  cursor: pointer;
  position: relative;
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  justify-content: center;
}
.l-nav-side-section-title-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--spacing-10);
  height: var(--spacing-10);
  border-radius: var(--radius-md);
  z-index: var(--layer-5);
  cursor: pointer;
  transition: all var(--duration-300) ease;
}
.l-nav-side-section-title-icon--icon {
  z-index: var(--layer-1);
}
.l-nav-side-section-title-icon--active {
  color: var(--l-nav-side-highlight);
  font-weight: 800;
  white-space: nowrap;
}
.l-nav-side-section-title-hover-full {
  width: var(--spacing-10);
  height: var(--spacing-10);
  position: absolute;
  left: 0;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: width 0.25s ease;
}
.l-nav-side-section-title-hover-full--hover {
  width: calc(100% + var(--spacing-4));
  opacity: 1;
}
.l-nav-side-section-title-hover-children-list-full {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  min-width: var(--spacing-36);
  font-size: var(--sizing-xs);
  margin-left: var(--spacing-10);
}
.link-underline {
  position: absolute;
  width: var(--spacing-4);
  height: 2px;
  background: var(--l-nav-side-text);
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin-top: var(--spacing-1);
  visibility: hidden;
}

.link-underline-slide-in {
  animation: slide-in 0.3s forwards;
  -webkit-animation: slide-in 0.3s forwards;
  visibility: visible;
}

@keyframes slide-in {
  100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
  100% { -webkit-transform: translateX(0%); }
}
</style>
