import { useWindowScroll } from '@vueuse/core'

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

  const headerHeight = computed(() => {
    return breakpoints.value.isMobile ? 48 : 64
  })
  const stoveGnbHeight = 48 as number
  const isPassedStoveGnb = ref(false)
  const scrollGnbPosition = ref(stoveGnbHeight)

  const updateScrollValue = () => {
    if (stoveGnbHeight <= windowY.value) {
      isPassedStoveGnb.value = true
      scrollGnbPosition.value = 0
    } else {
      isPassedStoveGnb.value = false
      if (windowY.value === 0) {
        scrollGnbPosition.value = stoveGnbHeight
      } else {
        scrollGnbPosition.value = stoveGnbHeight - windowY.value
      }
    }
  }

  const controlScrollLock = (state: boolean) => {
    if (!import.meta.client) return

    if (state) {
      document.body.classList.add('scroll-lock')
    } else {
      document.body.classList.remove('scroll-lock')
    }
  }

  const scrollToAnchor = (targetId: string) => {
    const targetElement = document.getElementById(targetId)
    if (!targetElement) return

    const elementTop = targetElement.getBoundingClientRect().top
    const currentScrollY = window.scrollY
    const targetScrollY = currentScrollY + elementTop - headerHeight.value

    windowY.value = targetScrollY
  }

  return {
    stoveGnbHeight,
    isPassedStoveGnb,
    scrollGnbPosition,

    updateScrollValue,
    controlScrollLock,
    scrollToAnchor,
  }
})