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

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

/**
 * [TODO] 수정 필요
 * 이미지 경로를 완전한 호스트 URL로 변환합니다.
 * @param path 이미지 경로
 * @returns 완전한 이미지 URL
 */
export const getResolvedHost = (path: string): string => {
  // path가 없으면 빈 문자열 반환
  if (!path || typeof path !== 'string') return ''

  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 getDeviceSrc = (
  pathArray: PageDataResourceGroupResPath,
  options?: {
    resourcesType?: 'image' | 'video'
  }
) => {
  // pathArray가 없으면 null 반환
  if (!pathArray) return null

  const { resourcesType = 'image' } = options ?? {}
  const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
  const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'

  const pcPath = pathArray[pcField] || pathArray[mobileField]
  const mobilePath = pathArray[mobileField] || pathArray[pcField]

  // 경로가 없으면 null 반환
  if (!pcPath && !mobilePath) return null

  const resolvedImages = {
    pc: pcPath ? getResolvedHost(pcPath) : '',
    mobile: mobilePath ? getResolvedHost(mobilePath) : '',
  }

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

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

/**
 * pagination 활성화, 비활성화 style을 반환합니다.
 * @param paginationGroups pagination groups 배열
 * @param options type: 'thumbnail' | 'bullet' (기본값: 'thumbnail')
 * @returns Record<string, string> CSS 변수 객체
 */
export const getPaginationClass = (
  paginationGroups?: PageDataResourceGroups
): Record<string, string> => {
  if (!paginationGroups || paginationGroups.length < 2) {
    return {}
  }

  // 색상 추출 또는 기본값 사용
  const paginationActive = getColorCode({
    colorName: paginationGroups[0]?.display?.color_name,
    colorCode: paginationGroups[0]?.display?.color_code,
  })

  const paginationDisabled = getColorCode({
    colorName: paginationGroups[1]?.display?.color_name,
    colorCode: paginationGroups[1]?.display?.color_code,
  })
  return {
    '--pagination-active': paginationActive,
    '--pagination-disabled': paginationDisabled,
  }
}