/**
 * 스타일 유틸리티 함수
 * @description 스타일 처리에 필요한 유틸리티 함수를 제공합니다.
 */

import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'

/**
 * [TODO] 수정 필요
 * 이미지 경로를 완전한 호스트 URL로 변환합니다.
 * @param path 이미지 경로
 * @returns 완전한 이미지 URL
 */
export const getResolvedHost = (path: string): string => {
  if (
    path.startsWith('http://') ||
    path.startsWith('https://') ||
    path.startsWith('www.')
  ) {
    return path
  }

  const config = useRuntimeConfig()
  //   const isDev = process.env.NODE_ENV === "development";
  //   const rootPath = isDev ? "/images" : `${config.public.staticUrl}`;

  const rootPath = config.public.staticUrl

  return `${rootPath}${path}`
}

/**
 * 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
 * @param pathArray 리소스 경로 배열
 * @param options 리소스 타입 옵션
 * @returns 반응형 리소스 객체 또는 null
 */
export const getResponsiveSrc = (
  pathArray: PageDataResourceGroupResPath,
  options: {
    resourcesType?: 'image' | 'bg' | 'video'
  } = {}
) => {
  const { resourcesType = 'image' } = options
  const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
  const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'

  if (!pathArray?.[mobileField]) {
    return null
  }

  const resolvedImages = {
    pc: getResolvedHost(pathArray[pcField] || pathArray[mobileField]),
    mobile: getResolvedHost(pathArray[mobileField]),
  }

  if (resourcesType === 'bg') {
    return {
      '--pc-bg': `url(${resolvedImages.pc})`,
      '--mobile-bg': `url(${resolvedImages.mobile})`,
    }
  }

  return {
    mobileSrc: resolvedImages.mobile,
    pcSrc: resolvedImages.pc,
  }
}

/**
 * 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
 * @returns 반응형 배경 클래스 배열
 */
export const getResponsiveClass = () => {
  return ['bg-[image:var(--mobile-bg)]', 'md:bg-[image:var(--pc-bg)]']
}

/**
 * 색상값을 반환합니다.
 * @param colorName 색상 이름
 * @param colorCode 색상 코드
 * @returns 색상 값
 */
export const getColorCode = ({
  colorName,
  colorCode,
}: {
  colorName: string
  colorCode: string
}) => {
  if (colorName) {
    return `var(--${colorName})`
  } else if (colorCode) {
    return colorCode
  }
}