import { SpecifyTransitionValue } from '@specifyapp/specify-design-token-format';
import { durationToJson } from './duration.js';
import { stepsTimingFunctionToJson } from './stepTimingFunction.js';
import { cubicBezierToJson } from './cubicBezier.js';

export function transitionToJson(value: SpecifyTransitionValue) {
  const transitionDelay = durationToJson(value.delay);
  const transitionDuration = durationToJson(value.duration);
  const transitionTimingFunction = Array.isArray(value.timingFunction)
    ? cubicBezierToJson(value.timingFunction)
    : stepsTimingFunctionToJson(value.timingFunction);

  return [
    { value: transitionDelay, nameExtension: 'transitionDelay' },
    { value: transitionDuration, nameExtension: 'transitionDuration' },
    {
      value: transitionTimingFunction,
      nameExtension: 'transitionTimingFunction',
    },
  ];
}