import { SpecifyTextStyleValue, TokenState } from '@specifyapp/specify-design-token-format';
import { colorToTailwind } from './color.js';
import { dimensionToTailwind } from './dimension.js';
import { fontToTailwind, fontToTailwindWithCssVariables } from './font.js';
import {
  dataOfToken,
  templateRenderer,
} from '../../../shared/to-css-custom-properties/template.js';
import { makeCSSAlias } from '../../../shared/to-css-custom-properties/makeCSSAlias.js';

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

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

    const textStyle = token.getJSONValue({
      resolveAliases: true,
      allowUnresolvable: false,
      targetMode: m,
    });

    const variables = fontToTailwindWithCssVariables(token, removeSingleMode, renderVariable);

    if (!!textStyle.color)
      variables.push({ value: makeCSSAlias(`${variableName}-color`), type: 'colors', mode });
    if (!!textStyle.textIndent)
      variables.push({
        value: makeCSSAlias(`${variableName}-text-indent`),
        type: 'textIndent',
        mode,
      });
    if (!!textStyle.fontSize)
      variables.push({ value: makeCSSAlias(`${variableName}-font-size`), type: 'fontSize', mode });
    if (!!textStyle.lineHeight)
      variables.push({
        value: makeCSSAlias(`${variableName}-line-height`),
        type: 'lineHeight',
        mode,
      });
    if (!!textStyle.letterSpacing)
      variables.push({
        value: makeCSSAlias(`${variableName}-letter-spacing`),
        type: 'letterSpacing',
        mode,
      });

    return variables;
  });
}

export function textStyleToTailwind(value: SpecifyTextStyleValue) {
  const tokens = fontToTailwind(value.font);

  const textColor = !!value.color ? colorToTailwind(value.color) : undefined;
  const textIndent = !!value.textIndent ? dimensionToTailwind(value.textIndent) : undefined;
  const fontSize = dimensionToTailwind(value.fontSize);
  const lineHeight = !!value.lineHeight ? dimensionToTailwind(value.lineHeight) : undefined;
  const letterSpacing = !!value.letterSpacing
    ? dimensionToTailwind(value.letterSpacing)
    : undefined;

  if (!!textColor) tokens.push({ value: textColor, type: 'textColor' });
  if (!!textIndent) tokens.push({ value: textIndent, type: 'textIndent' });
  if (!!fontSize) tokens.push({ value: fontSize, type: 'fontSize' });
  if (!!lineHeight) tokens.push({ value: lineHeight, type: 'lineHeight' });
  if (!!letterSpacing) tokens.push({ value: letterSpacing, type: 'letterSpacing' });

  return tokens;
}