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

import { isTypeVideo } from '#layers/utils/dataUtil'
import type {
  PageDataResourceGroups,
  PageDataResourceGroup,
  PageDataResourceGroupResPath,
} from '#layers/types/api/pageData'

/**
 * 이미지 경로를 완전한 호스트 URL로 변환합니다.
 * @param path 이미지 경로
 * @returns 완전한 이미지 URL
 */
export const getImageHost = (
  path: string,
  options: { imageType?: 'common' | 'game' } = {}
): string => {
  if (!path) return ''

  if (/^(https?:\/\/|www\.)/.test(path)) return path

  const config = useRuntimeConfig()
  const { staticUrl, assetsUrl } = config.public
  const { imageType = 'game' } = options

  const isDevelopment = process.env.NODE_ENV === 'development'
  const isTypeGame = imageType === 'game'

  // * [TODO] 수정 필요 : 게임별 이미지 로컬에 추가 필요.
  if (isTypeGame) {
    return `${staticUrl}${path}`
  }

  // 개발 환경일 때는 루트 경로 생략
  if (isDevelopment) return path

  // 게임/공통 여부에 따른 경로 결정
  const basePath = isTypeGame ? staticUrl : assetsUrl

  return `${basePath}${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 ? getImageHost(pcPath) : '',
    mobile: mobilePath ? getImageHost(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,
  }
}

/**
 * 미디어 이미지를 반환합니다. (이미지 / 유튜브 썸네일)
 * @param resourceGroups - 미디어 리소스 그룹 객체
 * @param quality - 썸네일 품질
 * @returns 미디어 이미지 소스 (이미지 / 유튜브 썸네일)
 */
export const getMediaImgSrc = (
  resourceGroups: PageDataResourceGroup,
  quality: 'default' | 'medium' | 'high' | 'standard' | 'maxres' = 'high'
): string => {
  if (!resourceGroups) return ''

  const mediaSrc = resourceGroups?.display?.text
  const mediaType = resourceGroups?.resource_type

  if (isTypeVideo(mediaType) && mediaSrc) {
    const thumbnailUrl = getYouTubeThumbnail(mediaSrc, quality)
    return thumbnailUrl
  }

  return mediaSrc || ''
}