import type { Transform } from "style-dictionary/types"
import { isTransition } from "../filters/isTransition"
import { getValue } from "../helpers/get"
import type { TokenUnit } from "../helpers/interfaces"

type TokenTransition = {
  duration: TokenUnit
  delay: TokenUnit
  timingFunction: number[]
}

export function transformTransition(tokenValue: TokenTransition): string {
  if (typeof tokenValue !== "object") {
    // already transformed to string
    return tokenValue
  }
  const { duration, delay, timingFunction } = tokenValue
  return `${duration.value}${duration.unit} cubic-bezier(${timingFunction.join(",")}) ${delay.value}${delay.unit}`
}

export const transitionCssTransform: Transform = {
  name: "transition/css-shorthand-dtcg",
  type: "value",
  transitive: true,
  filter: isTransition,
  transform: (token, _, options) => {
    const tokenValue = getValue<TokenTransition>(token, options, { useOriginalValue: true })
    return transformTransition(tokenValue)
  },
}