import type { Transform, TransformedToken } from "style-dictionary/types"
import { isGradient } from "../filters/isGradient"
import { getValue } from "../helpers/get"

type TokenGradient = {
  color: number
  position: number
}

export function transformGradient(tokenValue: TokenGradient[], token: TransformedToken): string {
  const stops = tokenValue
    .map(
      (stop: TokenGradient) =>
        `${stop.color}${stop.position ? ` ${Math.floor(stop.position * 100)}%` : ""}`,
    )
    .join(", ")
  return `${token.angle ? `${token.angle}, ` : ""}${stops}`
}

export const gradientCss: Transform = {
  name: "gradient/css-shorthand-dtcg",
  type: "value",
  transitive: true,
  filter: isGradient,
  transform: (token, _, options) => {
    const tokenValue = getValue<TokenGradient[]>(token, options, { useOriginalValue: true })
    return transformGradient(tokenValue, token)
  },
}