<template>
  <div
    ref="drawer"
    v-if="modelValue || left || right"
    class="nv-navigation-drawer"
    :class="{
      left: left,
      dark: dark,
      right: right,
      mini: propMini,
      active: isActive,
      hideOverlay: hideOverlay,
      actived: modelValue,
    }"
    :style="{
      left: left ? (modelValue ? 0 : `-${mini ? 64 : 250}px`) : 'auto',
      right: right ? (modelValue ? 0 : `-${mini ? 64 : 250 || 0}px`) : 'auto',
    }"
  >
    <div
      class="nv-navigation-drawer__content"
      style="transition: 0.2s"
      :style="{ minWidth: `${propMini ? 0 : parseInt(minWidth)}px` }"
      @mouseenter="expandOnHover ? setMiniFalse() : null"
      @mouseleave="expandOnHover ? setMiniDefault() : null"
    >
      <div v-if="hasTitle" class="nv-navigation-drawer__header">
        <NvIcon v-if="icon" class="nv-navigation-drawer__icon" :icon="icon" />
        <div
          v-if="(title && !contentMini) || $slots.title"
          :class="{ 'ml-4': icon }"
          class="nv-navigation-drawer__header-title"
        >
          <div v-if="title">{{ title }}</div>
          <slot name="title" />
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
export default {
  name: "NvNavigationDrawer",
  props: {
    absolute: Boolean,
    accordeon: Boolean,
    customClass: { type: String, default: "" },
    dark: Boolean,
    expandOnHover: Boolean,
    hideOverlay: Boolean,
    icon: { type: String, default: "" },
    left: Boolean,
    mini: Boolean,
    minWidth: { type: Number, default: 250 },
    modelValue: { type: Boolean, default: true },
    right: Boolean,
    size: { type: String, default: "md" },
    title: { type: String, default: "" },
  },

  data: () => {
    return {
      openItems: [],
      propMini: false,
      contentMini: false,
      mounted: false,
    };
  },

  provide() {
    return {
      parentAbsolute: false,
      // parentAbsolute: this.absolute,
      parentAccordeon: this.accordeon,
      parentCustomClass: this.customClass,
      parentDark: this.dark,
      parentMinWidth: this.minWidth,
      parentSize: this.size,
      mini: computed(() => this.contentMini),
    };
  },

  computed: {
    hasTitle() {
      return this.icon || this.title || this.$slots.title;
    },

    isActive() {
      return (
        (this.left || this.right) && this.openItems.length && this.propMini
      );
    },
  },

  watch: {
    isActive() {
      if (this.isActive) {
        document.body.style.overflowY = "hidden";
      } else {
        document.body.style.overflowY = "auto";
      }
    },

    mini() {
      if (this.mini) {
        this.setMiniDefault();
      } else {
        this.setMiniFalse();
      }
    },
  },

  created() {
    this.propMini = this.mini;
    this.contentMini = this.mini;
  },

  mounted() {
    if (this.left || this.right) this.initDrawer();
  },

  methods: {
    initDrawer() {
      // сначала загружается навигация для рассчета ширины,
      // затем прячем за экран, насильно обновляем и устанавливаем transition
      const transition = "left 0.2s ease 0s, right 0.2s ease 0s";
      if (this.$refs.drawer && this.$refs.drawer.style.transition === transition) return;
      this.$forceUpdate();
      setTimeout(() => {
        this.$refs.drawer.style.transition = transition;
      }, 0);
    },

    setMiniFalse() {
      this.propMini = false;
      setTimeout(() => {
        this.contentMini = false;
      }, 200);
      this.$emit("update:mini", this.propMini);
    },

    setMiniDefault() {
      this.openItems = [];
      this.propMini = this.mini;
      this.contentMini = this.mini;
      this.$emit("update:mini", this.propMini);
    },
  },
};
</script>

<style lang="scss" scoped>
.nv-navigation-drawer {
  @apply flex bg-black/20 shadow-md;

  &.active {
    @apply w-full shadow-none;
  }

  &.hideOverlay {
    @apply bg-transparent;
  }

  &.left {
    @apply fixed top-0 h-screen overflow-y-auto z-50;
  }

  &.right {
    @apply fixed right-0 top-0 h-screen overflow-y-auto justify-end z-50;
  }

  .nv-navigation-drawer__content {
    @apply bg-white shadow-md flex flex-col;
  }

  &.dark {
    .nv-navigation-drawer__content {
      @apply bg-black text-white;
    }
  }

  .nv-navigation-drawer__header {
    @apply min-h-[64px] w-full flex items-center py-2 px-5 font-semibold;
  }
}

::-webkit-scrollbar {
  @apply w-0;
}
</style>
