<template>
  <div
    class="nv-tabs"
    :class="[...sizeableClasses, { dark: dark, vertical: vertical }]"
  >
    <div
      v-if="scrolling"
      class="nv-tabs__arrow"
      :style="{ width: `${arrowWidth}px` }"
      @click="prev"
    >
      <div class="nv-tabs__arrow-content border-r">
        <NvIcon class="nv-tabs__arrow-icon" :icon="prevIcon" />
      </div>
    </div>
    <div ref="list" class="nv-tabs__list" :class="{ multiline: multiline }">
      <slot />
    </div>
    <div
      v-if="scrolling"
      class="nv-tabs__arrow"
      :style="{ width: `${arrowWidth}px` }"
      @click="next"
    >
      <div class="nv-tabs__arrow-content border-l">
        <NvIcon class="nv-tabs__arrow-icon" :icon="nextIcon" />
      </div>
    </div>
  </div>
</template>

<script>
import useSize from "../../composables/sizeable";

export default {
  name: "NvTabs",

  props: {
    modelValue: { type: Number, required: true },
    customClass: { type: String, default: "" },
    dark: Boolean,
    grow: Boolean,
    left: Boolean,
    minWidth: { type: Number, default: 0 },
    multiline: Boolean,
    nextIcon: { type: String, default: "nvi-chevron-double-right" },
    noWrap: Boolean,
    prevIcon: { type: String, default: "nvi-chevron-double-left" },
    right: Boolean,
    size: { type: String, default: "md" },
    vertical: Boolean,
  },

  data() {
    return {
      arrowWidth: 35,
      index: 0,
      items: [],
      scrolling: false,
    };
  },

  mounted() {
    this.getScrolling();
    window.addEventListener("resize", this.getScrolling);
  },

  unmounted() {
    window.removeEventListener("resize", this.getScrolling);
  },

  methods: {
    change(index) {
      this.$emit("update:modelValue", index);
    },

    getScrolling() {
      if (this.vertical) return;
      this.scrolling = false;
      this.$nextTick(() => {
        this.scrolling =
          this.$refs.list.offsetWidth < this.$refs.list.scrollWidth - 10; // 10px запас, чтобы не дергалась лишний раз при ресайзе
      });
    },

    next() {
      const list = this.$refs.list;
      const items = list.querySelectorAll(".nv-tab");
      const itemsPositions = [];

      items.forEach((i) => {
        itemsPositions.push(i.offsetLeft + i.clientWidth - list.offsetLeft);
      });
      const currentPosition =
        Math.ceil(list.scrollLeft) + list.clientWidth + 10;
      let nextPosition = itemsPositions.find((ip) => ip > currentPosition);

      if (nextPosition === undefined) return;
      nextPosition = nextPosition - list.clientWidth;
      list.scrollTo({
        left: nextPosition,
        top: 0,
        behavior: "smooth",
      });
    },

    prev() {
      const list = this.$refs.list;
      const items = list.querySelectorAll(".nv-tab");
      const itemsPositions = [];
      items.forEach((i) => {
        itemsPositions.push(i.offsetLeft - list.offsetLeft);
      });
      const currentPosition = Math.floor(list.scrollLeft) - 10;
      const nextPosition = itemsPositions
        .reverse()
        .find((ip) => ip < currentPosition);

      if (nextPosition === undefined) return;
      list.scrollTo({
        left: nextPosition,
        top: 0,
        behavior: "smooth",
      });
    },
  },

  setup(props) {
    const { sizeableClasses } = useSize(props);
    return { sizeableClasses };
  },
};
</script>
<style lang="scss" scoped>
.nv-tabs {
  @apply bg-white flex;

  &__arrow {
    @apply cursor-pointer flex justify-center items-center shrink-0 text-subline hover:text-black;
  }

  &__arrow-content {
    @apply border-gray-300 cursor-pointer flex justify-center items-center w-full;
  }

  &__list {
    @apply border-b border-gray-200 grow flex overflow-x-auto overflow-y-hidden;
  }

  &__list.multiline {
    @apply flex-wrap;
  }

  &.dark {
    @apply bg-black text-white;

    .nv-tabs__list {
      @apply border-gray-800;
    }
  }
  &.vertical {
    .nv-tabs__list {
      @apply border-b-0 border-r flex-col;
    }
  }
}
.nv-tabs__list::-webkit-scrollbar {
  @apply h-0 w-0 bg-transparent;
}
</style>
