import { SpecifyTransitionValue, TokenState } from '@specifyapp/specify-design-token-format';
import { durationToTailwind } from './duration.js';
import { stepsTimingFunctionToTailwind } from './stepTimingFunction.js';
import { cubicBezierToTailwind } from './cubicBezier.js';
import {
  dataOfToken,
  templateRenderer,
} from '../../../shared/to-css-custom-properties/template.js';
import { makeCSSAlias } from '../../../shared/to-css-custom-properties/makeCSSAlias.js';

export function transitionToTailwindWithCssVariables(
  token: TokenState,
  removeSingleMode: boolean,
  renderVariable: templateRenderer,
) {
  return token.modes.flatMap(m => {
    const mode = removeSingleMode && token.modes.length === 1 ? undefined : m;

    const variableName = renderVariable(dataOfToken(token, mode));

    return [
      { value: makeCSSAlias(`${variableName}-delay`), type: 'transitionDelay', mode },
      { value: makeCSSAlias(`${variableName}-duration`), type: 'transitionDuration', mode },
      {
        value: makeCSSAlias(`${variableName}-timing-function`),
        type: 'transitionTimingFunction',
        mode,
      },
    ];
  });
}

export function transitionToTailwind(value: SpecifyTransitionValue) {
  const transitionDelay = durationToTailwind(value.delay);
  const transitionDuration = durationToTailwind(value.duration);
  const transitionTimingFunction = Array.isArray(value.timingFunction)
    ? cubicBezierToTailwind(value.timingFunction)
    : stepsTimingFunctionToTailwind(value.timingFunction);

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