import type {
  PptTemplateApplied,
  PptTemplateConfig,
  PptRevealTransition,
  PptSlideTransition,
} from '../types/pptTemplate'

export function getSlideTransitionNames(slide: PptSlideTransition): {
  forward: string
  backward: string
} {
  switch (slide) {
    case 'fade':
      return { forward: 'ppt-slide-fade', backward: 'ppt-slide-back-fade' }
    case 'push':
      return { forward: 'ppt-slide-push', backward: 'ppt-slide-back-push' }
    default:
      return { forward: 'ppt-slide', backward: 'ppt-slide-back' }
  }
}

export function getRevealTransitionName(reveal: PptRevealTransition): string {
  return reveal === 'fade' ? 'ppt-reveal-fade' : 'ppt-reveal'
}

/** 将模板 config 转为 CSS 变量与 transition 名 */
export function applyPptTemplate(config: PptTemplateConfig): PptTemplateApplied {
  const { colors, animation, transitions, ui } = config
  const slideNames = getSlideTransitionNames(transitions.slide)

  return {
    templateVars: {
      '--ppt-bg': colors.bg,
      '--ppt-text': colors.text,
      '--ppt-muted': colors.muted,
      '--ppt-accent': colors.accent,
      '--ppt-code-bg': colors.codeBg,
      '--ppt-code-text': colors.codeText,
      '--ppt-border': colors.border,
      '--ppt-ease-soft': animation.easing,
      '--ppt-duration-reveal': animation.revealDuration,
      '--ppt-duration-reveal-leave': animation.revealLeaveDuration,
      '--ppt-duration-slide': animation.slideDuration,
      '--ppt-duration-layout': animation.layoutDuration,
      '--ppt-reveal-offset': animation.revealOffset,
      '--ppt-canvas-radius': ui.canvasBorderRadius,
    },
    slideTransitionForward: slideNames.forward,
    slideTransitionBackward: slideNames.backward,
    revealTransition: getRevealTransitionName(transitions.reveal),
  }
}