import {
  customPalette,
  colors,
  borderRadius,
  fontFamily,
  fontWeight,
  typography,
  unit,
  zIndices,
  spacing,
} from '../../../../src/style/variables';

import { Prefix } from '../constants';
import {
  generateArrayValues,
  generateColorVariations,
  generateCustomPalette,
  generateObjectValues,
  generateTypographyValues,
} from '../generators';
import { getVarName } from '../helpers';
import { GumGeneratorMixin } from '../models';

/**
 * Generates global CSS vars
 */
export const generateGlobalVars: GumGeneratorMixin = () => {
  const colorVars = generateColorVariations(colors);
  const colorPalette = generateCustomPalette(customPalette);
  const fontWeightVars = generateObjectValues(fontWeight, Prefix.fontWeight);
  const spacingVars = generateObjectValues(spacing, Prefix.spacing);
  const borderRadiusVars = generateObjectValues(
    borderRadius,
    Prefix.borderRadius,
  );
  const fontFamilyVars = generateObjectValues(fontFamily, Prefix.fontFamily);
  const levelVars = generateArrayValues(zIndices, Prefix.zIndex);
  const typographyVars = generateTypographyValues(typography);

  const unitVar = `${getVarName(Prefix.unit)}: ${unit}px;`;

  const mergedStyles = [
    unitVar,
    ...colorVars,
    ...colorPalette,
    ...fontWeightVars,
    ...fontFamilyVars,
    ...levelVars,
    ...typographyVars,
    ...borderRadiusVars,
    ...spacingVars,
  ].join('');

  return mergedStyles;
};