import { hsvaToRgbaString } from "@noya-app/noya-color";
import { Sketch } from "@noya-app/noya-file-format";
import { GradientStop } from "../components/Gradient";

const getRGBAColor = (value: GradientStop[], num: 100 | 360) =>
  [...value]
    .sort((a, b) => a.position - b.position)
    .map(
      (g) =>
        `${hsvaToRgbaString(g.color)} ${g.position * num}${
          num === 100 ? "%" : "deg"
        }`
    )
    .join(", \n");

export function getGradientBackground(
  value: GradientStop[],
  type: Sketch.GradientType,
  direction?: number
) {
  if (type === Sketch.GradientType.Angular) {
    return `conic-gradient(${getRGBAColor(value, 360)})`;
  }

  const color = getRGBAColor(value, 100);
  const position =
    type === Sketch.GradientType.Radial
      ? "radial-gradient(circle"
      : `linear-gradient(${direction ?? 180}deg`;

  return `${position}, ${color})`;
}