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') // < 768px
  const isSm = breakpoints.smaller('md') // < 1024px
  const isMd = breakpoints.smaller('lg') // < 1440px
  const isLg = breakpoints.greater('lg') // >= 1440px
  const isMobile = isXs || isSm
  const isDesktop = isLg || isMd

  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'
    }
  ) => {
    const result = getDeviceSrc(path, options)
    if (!result) return ''
    return breakpoints.value.isMobile ? result.mobileSrc : result.pcSrc
  }

  return { getCurrentSrc }
}