import { useBreakpoints } from '@vueuse/core'
import type { PageDataResourceGroup } from '#layers/types/api/pageData'

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

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

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

  const isAboveSm = breakpoints.greaterOrEqual('sm') // x >= 768
  const isAboveMd = breakpoints.greaterOrEqual('md') // x >= 1024
  const isAboveLg = breakpoints.greaterOrEqual('lg') // x >= 1440
  const isAboveXl = breakpoints.greaterOrEqual('xl') // x >= 1920

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

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

  const getCurrentSrc = (
    resourcesData: PageDataResourceGroup,
    options?: {
      imageType?: 'public' | 'cdn'
      resourcesType?: 'IMG' | 'VID'
    }
  ) => {
    const result = getResourceSrc(resourcesData, options?.resourcesType)
    if (!result) return ''
    return breakpoints.value.isMobile
      ? formatPathHost(result.mo, { imageType: options?.imageType })
      : formatPathHost(result.pc, { imageType: options?.imageType })
  }

  return { getCurrentSrc }
}