import { TokenState } from '@specifyapp/specify-design-token-format';
import { borderValueToCss } from '../../../converters/css/tokenTypes/border.js';
import { breakpointValueToCss } from '../../../converters/css/tokenTypes/breakpoint.js';
import { colorValueToCss } from '../../../converters/css/tokenTypes/color.js';
import { cubicBezierValueToCss } from '../../../converters/css/tokenTypes/cubicBezier.js';
import { dimensionValueToCss } from '../../../converters/css/tokenTypes/dimension.js';
import { durationValueToCss } from '../../../converters/css/tokenTypes/duration.js';
import { fontValueToCss } from '../../../converters/css/tokenTypes/font.js';
import { fontWeightValueToCss } from '../../../converters/css/tokenTypes/fontWeight.js';
import { gradientValueToCss } from '../../../converters/css/tokenTypes/gradient.js';
import { gradientsValueToCss } from '../../../converters/css/tokenTypes/gradients.js';
import { opacityValueToCss } from '../../../converters/css/tokenTypes/opacity.js';
import { radiusValueToCss } from '../../../converters/css/tokenTypes/radius.js';
import { radiiValueToCss } from '../../../converters/css/tokenTypes/radii.js';
import { spacingValueToCss } from '../../../converters/css/tokenTypes/spacing.js';
import { spacingsValueToCss } from '../../../converters/css/tokenTypes/spacings.js';
import { shadowValueToCss } from '../../../converters/css/tokenTypes/shadow.js';
import { shadowsValueToCss } from '../../../converters/css/tokenTypes/shadows.js';
import { textStyleValueToCss } from '../../../converters/css/tokenTypes/textStyle.js';
import { stepsTimingFunctionValueToCss } from '../../../converters/css/tokenTypes/stepsTimingFunction.js';
import { transitionValueToCss } from '../../../converters/css/tokenTypes/transition.js';
import { zIndexValueToCss } from '../../../converters/css/tokenTypes/zIndex.js';
import { matchJsonValue } from '../../utils/jsonValueMatcher.js';
import { makeCSSVariable } from './internals/makeCSSVariable.js';

export function renderValueToken(token: TokenState, mode: string, aliasVariableName: string) {
  return matchJsonValue<Array<string> | string | number | undefined>(
    {
      dimension: dimensionValueToCss,
      breakpoint: breakpointValueToCss,
      color: colorValueToCss,
      cubicBezier: cubicBezierValueToCss,
      duration: durationValueToCss,
      zIndex: zIndexValueToCss,
      border: borderValueToCss,
      font: v =>
        Object.entries(fontValueToCss(v)).map(([name, value]) =>
          typeof value === 'number' ? '' : makeCSSVariable(`${aliasVariableName}-${name}`, value),
        ),
      fontWeight: fontWeightValueToCss,
      gradient: gradientValueToCss,
      gradients: gradientsValueToCss,
      opacity: opacityValueToCss,
      radius: radiusValueToCss,
      radii: radiiValueToCss,
      shadow: shadowValueToCss,
      shadows: shadowsValueToCss,
      spacing: spacingValueToCss,
      spacings: spacingsValueToCss,
      stepsTimingFunction: stepsTimingFunctionValueToCss,
      textStyle: v =>
        Object.entries(textStyleValueToCss(v)).map(([name, value]) =>
          typeof value === 'number' ? '' : makeCSSVariable(`${aliasVariableName}-${name}`, value),
        ),
      transition: v =>
        Object.entries(transitionValueToCss(v)).map(([name, value]) =>
          makeCSSVariable(`${aliasVariableName}-${name}`, value),
        ),
    },
    _ => {
      return undefined;
    },
    token,
    mode,
  );
}