import { SpecifyGradientValue } from '@specifyapp/specify-design-token-format';
import { colorToTailwind } from './color.js';

export function gradientToTailwind(value: SpecifyGradientValue) {
  const colors = value.colorStops.flatMap(({ color, position }) => {
    const tailwindColor = colorToTailwind(color);
    if (!tailwindColor) return [];
    return [`${tailwindColor} ${position * 100}%`];
  });

  switch (value.type) {
    case 'conic': {
      if (colors.length !== value.colorStops.length) return undefined;

      return `conic-gradient(from ${value.angle}deg at ${value.position}, ${colors.join(', ')})`;
    }
    case 'radial': {
      if (colors.length !== value.colorStops.length) return undefined;

      return `radial-gradient(circle at ${value.position}, ${colors.join(', ')})`;
    }
    case 'linear': {
      if (colors.length !== value.colorStops.length) return undefined;

      return `linear-gradient(${value.angle}deg, ${colors.join(', ')})`;
    }
  }
}