import { defineStore } from 'pinia'
import { useWindowScroll } from '@vueuse/core'

export const useScrollStore = defineStore('scrollStore', () => {
  const { x: windowX, y: windowY } = useWindowScroll({ behavior: 'smooth' })

  const stoveGnbHeight = 48 as number
  const scrollXValue = ref('0px')
  const isPassedStoveGnb = ref(false)

  const updateScrollValue = () => {
    if (stoveGnbHeight <= windowY.value) {
      isPassedStoveGnb.value = true
      scrollXValue.value = `-${windowX.value}px`
    } else {
      isPassedStoveGnb.value = false
      scrollXValue.value = '0px'
    }
  }

  const controlScrollLock = (state: boolean) => {
    if (state) {
      document.body.classList.add('scroll-lock')
    } else {
      document.body.classList.remove('scroll-lock')
    }
  }

  return {
    stoveGnbHeight,
    scrollXValue,
    isPassedStoveGnb,

    updateScrollValue,
    controlScrollLock,
  }
})