<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{ left: left + 'px' }">
      <slot></slot>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from 'vue';

const padding = 15; // tag's padding
const left = ref(0);

const handleScroll = (e: WheelEvent) => {
  const eventDelta = e.deltaY ? -e.deltaY * 3 : 0; // Use deltaY for scrolling
  const $container = (e.currentTarget as HTMLElement).querySelector('.scroll-container') as HTMLElement;
  const $containerWidth = $container.offsetWidth;
  const $wrapper = (e.currentTarget as HTMLElement).querySelector('.scroll-wrapper') as HTMLElement;
  const $wrapperWidth = $wrapper.offsetWidth;

  if (eventDelta > 0) {
    left.value = Math.min(0, left.value + eventDelta);
  } else {
    if ($containerWidth - padding < $wrapperWidth) {
      if (left.value < -($wrapperWidth - $containerWidth + padding)) {
        left.value = left.value;
      } else {
        left.value = Math.max(left.value + eventDelta, $containerWidth - $wrapperWidth - padding);
      }
    } else {
      left.value = 0;
    }
  }
};

const moveToTarget = ($target: HTMLElement) => {
  const $container = document.querySelector('.scroll-container') as HTMLElement;
  const $containerWidth = $container.offsetWidth;
  const $targetLeft = $target.offsetLeft;
  const $targetWidth = $target.offsetWidth;

  if ($targetLeft < -left.value) {
    // tag in the left
    left.value = -$targetLeft + padding;
  } else if ($targetLeft + padding > -left.value && $targetLeft + $targetWidth < -left.value + $containerWidth - padding) {
    // tag in the current view
  } else {
    // tag in the right
    left.value = -($targetLeft - ($containerWidth - $targetWidth) + padding);
  }
};
</script>
  
  <style scoped>
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 100%;
}
/* .scroll-wrapper {
  position: absolute;
} */
</style>