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

import { CssResolvableAliasStrategy } from './CssAliasStrategy.js';

function getJsonValue(tokenState: TokenState, mode: string) {
  return tokenState.matchJSONValueByType<string | number | Record<string, string | number>>(
    {
      dimension: dimensionValueToCss,
      breakpoint: breakpointValueToCss,
      color: colorValueToCss,
      cubicBezier: cubicBezierValueToCss,
      duration: durationValueToCss,
      zIndex: zIndexValueToCss,
      border: borderValueToCss,
      font: fontValueToCss,
      fontWeight: fontWeightValueToCss,
      gradient: gradientValueToCss,
      gradients: gradientsValueToCss,
      opacity: opacityValueToCss,
      radius: radiusValueToCss,
      radii: radiiValueToCss,
      shadow: shadowValueToCss,
      shadows: shadowsValueToCss,
      spacing: spacingValueToCss,
      spacings: spacingsValueToCss,
      stepsTimingFunction: stepsTimingFunctionValueToCss,
      textStyle: textStyleValueToCss,
      transition: transitionValueToCss,
    },
    _ => {
      throw new Error(`Token of type: ${tokenState.type} can't be converted to css`);
    },
  )![mode];
}

/**
 * Will create a resolve alias strategy. By applying this strategy when converting a token to css,
 * rather than converting the alias to a css variable, we will resolve it and convert it to the css value, e.g: `12px`
 */
export function createResolveAliasStrategy(): CssResolvableAliasStrategy {
  return value => {
    if (value instanceof ResolvableTopLevelAlias) {
      return value.tokenState.modes.reduce((acc, curr) => {
        const converted = getJsonValue(value.tokenState, curr);

        if (!converted) return acc;

        acc[curr] = converted;

        return acc;
      }, {} as { [mode: string]: string | number | Record<string, string | number> }) as any;
    } else {
      return getJsonValue(value.tokenState, value.targetMode);
    }
  };
}