import { SpecifyFontValue, TokenState } from '@specifyapp/specify-design-token-format';
import {
  dataOfToken,
  templateRenderer,
} from '../../../shared/to-css-custom-properties/template.js';
import { makeCSSAlias } from '../../../shared/to-css-custom-properties/makeCSSAlias.js';

export function fontToTailwindWithCssVariables(
  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}-font-family`), type: 'fontFamily', mode },
      { value: makeCSSAlias(`${variableName}-font-weight`), type: 'fontWeight', mode },
    ];
  });
}

export function fontToTailwind(value: SpecifyFontValue) {
  return [
    { value: value.postScriptName, type: 'fontFamily' },
    {
      value: value.weight.toString(),
      type: 'fontWeight',
    },
  ];
}