import { useBreakpoints } from '@vueuse/core'
import { getDeviceSrc } from '#layers/utils/styleUtil'
import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'

export const BREAKPOINTS = {
  xs: 360,
  sm: 768,
  md: 1024,
  lg: 1440,
} as const

/**
 * useBreakpoints 기반 반응형 브레이크포인트
 */
export const useResponsiveBreakpoints = () => {
  const breakpoints = useBreakpoints(BREAKPOINTS)
  const isXs = breakpoints.smaller('sm') // < 768
  const isSm = breakpoints.between('sm', 'md') // 768 <= x < 1024
  const isMd = breakpoints.between('md', 'lg') // 1024 <= x < 1440
  const isLg = breakpoints.greaterOrEqual('lg') // >= 1440

  const isMobile = breakpoints.smaller('md') // < 1024
  const isDesktop = breakpoints.greaterOrEqual('md') // >= 1024

  return computed(() => ({
    isXs: isXs.value,
    isSm: isSm.value,
    isMd: isMd.value,
    isLg: isLg.value,
    isMobile: isMobile.value,
    isDesktop: isDesktop.value,
  }))
}

export const useResponsiveSrc = () => {
  const breakpoints = useResponsiveBreakpoints()

  const getCurrentSrc = (
    path: PageDataResourceGroupResPath,
    options?: {
      resourcesType?: 'image' | 'video'
      imageType?: 'game' | 'common'
    }
  ) => {
    const result = getDeviceSrc(path, options)
    if (!result) return ''
    return breakpoints.value.isMobile ? result.mobileSrc : result.pcSrc
  }

  return { getCurrentSrc }
}