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

interface DeviceMode {
  mode: 'desktop' | 'mobile'
  browser: 'chrome' | 'crawler' | 'edge' | 'firefox' | 'safari' | null
  isDesktop: boolean
  isMobile: boolean
  isTablet: boolean
  isIos: boolean
  isAndroid: boolean
  isDeviceReady: boolean
}

export const useCommonStore = defineStore('commonStore', () => {
  const stoveGnbHeight = 48

  const useDeviceData = useDevice()
  const { width: windowWidth, height: windowHeight } = useWindowSize()
  const { x: windowX, y: windowY } = useWindowScroll({ behavior: 'smooth' })

  const device = ref<DeviceMode>({
    mode: useDeviceData.isMobile || useDeviceData.isTablet ? 'mobile' : 'desktop',
    browser: useDeviceData.isChrome
      ? 'chrome'
      : useDeviceData.isCrawler
        ? 'crawler'
        : useDeviceData.isEdge
          ? 'edge'
          : useDeviceData.isFirefox
            ? 'firefox'
            : useDeviceData.isSafari
              ? 'safari'
              : null,
    isDesktop: useDeviceData.isDesktop,
    isMobile: useDeviceData.isMobile,
    isTablet: useDeviceData.isTablet,
    isIos: useDeviceData.isIos,
    isAndroid: useDeviceData.isAndroid,
    isDeviceReady: false
  })

  const isPassedStoveGnb = ref(false)
  const scrollFixedXValue = ref('0px')
  const footerRef = ref<HTMLElement | null>(null)
  const isLoading = ref<boolean>(true)
  const isScrollLock = ref<boolean>(false)

  const updateDeviceMode = () => {
    device.value.mode = useDeviceData.isMobile || useDeviceData.isTablet ? 'mobile' : 'desktop'
    device.value.browser = useDeviceData.isChrome
      ? 'chrome'
      : useDeviceData.isCrawler
        ? 'crawler'
        : useDeviceData.isEdge
          ? 'edge'
          : useDeviceData.isFirefox
            ? 'firefox'
            : useDeviceData.isSafari
              ? 'safari'
              : null
    device.value.isDesktop = useDeviceData.isDesktop
    device.value.isMobile = useDeviceData.isMobile
    device.value.isTablet = useDeviceData.isTablet
    device.value.isIos = useDeviceData.isIos
    device.value.isAndroid = useDeviceData.isAndroid
    device.value.isDeviceReady = true
  }

  const updateIsPassedStoveGnb = () => {
    isPassedStoveGnb.value = windowY.value >= stoveGnbHeight

    if (isPassedStoveGnb.value) {
      scrollFixedXValue.value = `-${windowX.value}px`
    } else {
      scrollFixedXValue.value = '0px'
    }
  }

  const isLoadingComplete = () => {
    isLoading.value = false
  }

  const scrollLock = () => {
    isScrollLock.value = !isScrollLock.value
  }

  const addScrollLock = () => {
    isScrollLock.value = true
  }

  const removeScrollLock = () => {
    isScrollLock.value = false
  }

  return {
    device,
    windowWidth,
    windowHeight,
    windowX,
    windowY,
    isPassedStoveGnb,
    scrollFixedXValue,
    footerRef,
    isLoading,
    isScrollLock,

    updateDeviceMode,
    updateIsPassedStoveGnb,
    isLoadingComplete,
    scrollLock,
    addScrollLock,
    removeScrollLock
  }
})