import { css } from '@emotion/react';
import {
  colors,
  fontFamily,
  fontWeight,
  typography,
} from '../../../../src/style/variables';

import { Prefix } from '../constants';
import { getMainColors, getVarValue } from '../helpers';
import { GumFontUtils, GumTextColor } from '../models';

/**
 * Generate text color utils based on variables.ts config
 */
export const generateTextColors: () => GumTextColor = () => {
  const mainColors = getMainColors();
  const color = {} as GumTextColor;

  for (const key in colors) {
    if (mainColors.hasOwnProperty(key)) {
      color[key] = css`
        color: hsl(var(${mainColors[key].hsl}));
      `;
    }
  }

  return color;
};

export const generateTypographyUtils: () => GumFontUtils = () => {
  const size = {};
  const weight = {};
  const family = {};

  for (const key in typography) {
    if (typography.hasOwnProperty(key)) {
      size[key] = css`
        font-size: ${getVarValue(Prefix.fontSize, key)};
        line-height: ${getVarValue(Prefix.lineHeight, key)};
      `;
    }
  }

  for (const key in fontWeight) {
    if (fontWeight.hasOwnProperty(key)) {
      weight[key] = css`
        font-weight: ${getVarValue(Prefix.fontWeight, key)};
      `;
    }
  }

  for (const key in fontFamily) {
    if (fontFamily.hasOwnProperty(key)) {
      family[key] = css`
        font-family: ${getVarValue(Prefix.fontFamily, key)};
      `;
    }
  }

  return { size, weight, family } as GumFontUtils;
};