<template>
  <div ref="scrollContainer" class="scroll-container" @mouseover="pauseScroll" @mouseleave="startScroll">
    <div ref="scrollContent" class="scroll-content">
      <div class="scroll-content-inner">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollPanel',
  props: {
    scrollSpeed: { type: Number, default: 1 }
  },
  data() {
    return {
      scrollInterval: null,
      scrollContainer: null,
      scrollContent: null,
      containerHeight: 0,
      contentHeight: 0,
      offsetY: 0
    }
  },
  mounted() {
    this.scrollContainer = this.$refs.scrollContainer
    this.scrollContent = this.$refs.scrollContent
    this.$nextTick(() => {
      this.calculateHeights()
      this.startScroll()
    })
    window.addEventListener('resize', this.calculateHeights)
  },
  beforeDestroy() {
    this.pauseScroll()
    window.removeEventListener('resize', this.calculateHeights)
  },
  methods: {
    calculateHeights() {
      this.containerHeight = this.scrollContainer.clientHeight
      this.contentHeight = this.scrollContent.scrollHeight / 2 // Half of the total content height
      this.scrollContent.style.height = `${this.contentHeight * 2}px` // Ensure enough height for both sections
      this.offsetY = 0
      this.scrollContent.style.transform = `translateY(0px)`
    },
    startScroll() {
      if (this.scrollInterval) return

      const scrollStep = () => {
        this.offsetY += this.scrollSpeed
        // console.log(this.offsetY)
        // console.log(this.contentHeight)
        if (this.offsetY >= this.contentHeight) {
          this.offsetY = 0
        }
        this.scrollContent.style.transform = `translateY(-${this.offsetY}px)`
        this.scrollInterval = requestAnimationFrame(scrollStep)
      }

      this.scrollInterval = requestAnimationFrame(scrollStep)
    },
    pauseScroll() {
      if (this.scrollInterval) {
        cancelAnimationFrame(this.scrollInterval)
        this.scrollInterval = null
      }
    }
  }
}
</script>

<style scoped>
.scroll-container {
  height: 100%;
  margin-top: 10px;
  overflow: hidden;
  /*position: relative;*/
}

.scroll-content {
  display: flex;
  flex-direction: column;
  transition: transform 0s linear;
}

.scroll-content-inner {
  position: relative;
}
</style>
