import { Prefix } from '../constants';
import { getVarName, getVarValue } from '../helpers';
import { GumParseTypography } from '../models';
/**
 * Generates font size and line height CSS variables
 * @param values Typography values defined in variables.ts config
 */
export const generateTypographyValues: GumParseTypography = (values) => {
  const newValues: string[] = [];

  for (const key in values) {
    if (values.hasOwnProperty(key)) {
      const [fontSize, lineHeight] = values[key];
      const keyUnitless = `${key}-unitless`;

      newValues.push(
        `${getVarName(Prefix.fontSize, keyUnitless)}: ${fontSize};`,
      );

      newValues.push(
        `${getVarName(Prefix.fontSize, key)}: calc(${getVarValue(
          Prefix.fontSize,
          keyUnitless,
        )} * 1px);`,
      );

      newValues.push(
        `${getVarName(Prefix.lineHeight, keyUnitless)}: ${lineHeight};`,
      );

      newValues.push(
        `${getVarName(Prefix.lineHeight, key)}: calc(${getVarValue(
          Prefix.lineHeight,
          keyUnitless,
        )} * 1px);`,
      );
    }
  }

  return newValues;
};