import {
  RawValueSignature,
  ResolvableModeLevelAlias,
  ResolvableTopLevelAlias,
  SpecifyTransitionValue,
  TokenState,
  UnresolvableModeLevelAlias,
} from '@specifyapp/specify-design-token-format';
import { makeCSSAlias } from '../utils/makeCSSAlias.js';
import { durationValueToCss, rawDurationToCss } from './duration.js';
import { unwrapInnerValue } from '../../_utils/unwrapInnerValue.js';
import { DEFAULT_UNRESOLVABLE_STRATEGY } from '../aliasStrategies/throwOnUnresolvable.js';
import {
  CssResolvableAliasStrategy,
  CssUnresolvableAliasStrategy,
} from '../aliasStrategies/CssAliasStrategy.js';
import {
  TemplateRenderer,
  dataOfToken,
  dataOfUnresolvedAlias,
} from '../../../builtInParsers/utils/template.js';

/**
 * Converts a `TokenState<'transition'>` to a css value.
 * **Warning**: this token is composite, so the output will be an object.
 * E.g: `{'font-family': 'family', 'font-weight': 900, 'font-style': 'italic' }`
 */
export function transitionToCss<UnresolvableReturn = never>(
  aliasStrategy: CssResolvableAliasStrategy,
  unresolvableAliasStrategy: CssUnresolvableAliasStrategy<UnresolvableReturn> = DEFAULT_UNRESOLVABLE_STRATEGY,
) {
  return (tokenState: TokenState<'transition'>) =>
    tokenState
      .getStatefulValueResult()
      .mapResolvableTopLevelAlias(aliasStrategy)
      .mapUnresolvableTopLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias))
      .mapTopLevelValue(value =>
        value
          .mapRawValue(rawValue =>
            rawTransitionToCss(rawValue, aliasStrategy, unresolvableAliasStrategy),
          )
          .mapResolvableModeLevelAlias(aliasStrategy)
          .mapUnresolvableModeLevelAlias(alias => unresolvableAliasStrategy(tokenState, alias))
          .unwrap(),
      )
      .unwrap() as { [mode: string]: ReturnType<typeof transitionValueToCss> };
}

export function modeLevelAliasTransitonToVariables(
  alias: ResolvableModeLevelAlias | ResolvableTopLevelAlias,
  renderAlias: TemplateRenderer,
  withCssAlias = true,
) {
  const mode = alias instanceof ResolvableModeLevelAlias ? alias.targetMode : undefined;

  const baseAlias = renderAlias(dataOfToken(alias.tokenState, mode));
  const delay = `${baseAlias}-delay`;
  const duration = `${baseAlias}-duration`;
  const timingFunction = `${baseAlias}-timing-function`;
  return {
    delay: withCssAlias ? makeCSSAlias(delay) : delay,
    duration: withCssAlias ? makeCSSAlias(duration) : duration,
    ['timing-function']: withCssAlias ? makeCSSAlias(timingFunction) : timingFunction,
  };
}

export function modeLevelUnresolvableAliasTransitonToVariables(
  alias: UnresolvableModeLevelAlias,
  renderAlias: TemplateRenderer,
  withCssAlias = true,
) {
  const renderData = dataOfUnresolvedAlias(alias);

  const baseAlias = renderAlias(dataOfUnresolvedAlias(alias));

  const delay = `${baseAlias}-delay`;
  const duration = `${baseAlias}-duration`;
  const timingFunction = `${baseAlias}-timing-function`;
  return {
    delay: withCssAlias ? makeCSSAlias(delay) : delay,
    duration: withCssAlias ? makeCSSAlias(duration) : duration,
    ['timing-function']: withCssAlias ? makeCSSAlias(timingFunction) : timingFunction,
  };
}

/**
 * Converts a `RawValueSignature<'transition'>` to css.
 */
export function rawTransitionToCss<UnresolvableReturn = never>(
  transition: RawValueSignature<'transition'>,
  aliasStrategy: CssResolvableAliasStrategy,
  unresolvableAliasStrategy: CssUnresolvableAliasStrategy<UnresolvableReturn> = DEFAULT_UNRESOLVABLE_STRATEGY,
) {
  return {
    delay: unwrapInnerValue(
      transition.delay.mapPrimitiveValue(rawDurationToCss),
      aliasStrategy,
      unresolvableAliasStrategy,
    ),
    duration: unwrapInnerValue(
      transition.duration.mapPrimitiveValue(rawDurationToCss),
      aliasStrategy,
      unresolvableAliasStrategy,
    ),
    ['timing-function']: unwrapInnerValue(
      transition.timingFunction.mapPrimitiveValue(timingFunction =>
        Array.isArray(timingFunction)
          ? `cubic-bezier(${timingFunction
              .map(v => v.resolveDeepValue().unwrapValue())
              .join(', ')})`
          : `steps(${timingFunction.stepsCount
              .resolveDeepValue()
              .unwrapValue()}, ${timingFunction.jumpTerm.unwrapValue()})`,
      ),
      aliasStrategy,
      unresolvableAliasStrategy,
    ),
  };
}

/**
 * Converts a transition to css.
 */
export function transitionValueToCss(transition: SpecifyTransitionValue) {
  return {
    delay: durationValueToCss(transition.delay),
    duration: durationValueToCss(transition.duration),
    ['timing-function']: Array.isArray(transition.timingFunction)
      ? `cubic-bezier(${transition.timingFunction.join(', ')})`
      : `steps(${transition.timingFunction.stepsCount}, ${transition.timingFunction.jumpTerm})`,
  };
}