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

import type { ColorObject } from '#layers/types/api/common'
import type { PageDataResourceGroups } from '#layers/types/api/pageData'

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

/**
 * 색상데이터를 받아 색상값을 반환합니다.
 * @param colorData 색상 데이터
 * @param type 색상 타입 (btn: 버튼, txt: 텍스트)
 * @returns 색상 값
 */
export const getColorCodeFromData = (
  data: ColorObject | undefined,
  type: 'btn' | 'txt' | 'none' = 'txt'
) => {
  const suffixMap: Record<'btn' | 'txt' | 'none', string> = {
    btn: '_btn',
    txt: '_txt',
    none: '',
  }
  const suffix = suffixMap[type]
  const colorName = data?.[`color_name${suffix}` as keyof typeof data]
  const colorCode = data?.[`color_code${suffix}` as keyof typeof data]

  return getColorCode({
    colorName: colorName as string | undefined,
    colorCode: colorCode as string | undefined,
  })
}

/**
 * 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 = getColorCodeFromData(
    paginationGroups[0]?.display,
    'none'
  )
  const paginationDisabled = getColorCodeFromData(
    paginationGroups[1]?.display,
    'none'
  )
  return {
    '--pagination-active': paginationActive,
    '--pagination-disabled': paginationDisabled,
  }
}