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

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

/**
 * useMediaQuery 기반 반응형 브레이크포인트
 */
export const useResponsiveBreakpoints = () => {
  const ssrWidth = BREAKPOINTS.xs
  const isXs = useMediaQuery(`(min-width: ${BREAKPOINTS.xs}px)`, { ssrWidth })
  const isSm = useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`, { ssrWidth })
  const isMd = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, { ssrWidth })
  const isLg = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`, { ssrWidth })
  const isMobile = useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`, {
    ssrWidth,
  })
  const isTablet = useMediaQuery(
    `(min-width: ${BREAKPOINTS.sm}px) and (max-width: ${BREAKPOINTS.md - 1}px)`,
    { ssrWidth }
  )
  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, {
    ssrWidth,
  })

  return computed(() => ({
    isXs: isXs.value,
    isSm: isSm.value,
    isMd: isMd.value,
    isLg: isLg.value,
    isMobile: isMobile.value,
    isTablet: isTablet.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 }
}