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

import { fontSize, lineHeight } from '../mixins';
import { GumFluidUtils, GumTypescale } from '../models';

/**
 * Finds the adjecent key in typography object
 * @param key typography object property name - find the key next to this property in typography object
 */
const findNext = (key: GumTypescale) => {
  const keys = Object.keys(typography) as GumTypescale[];

  return keys[(keys.indexOf(key) + 1) % keys.length];
};

/**
 * Generates fluid typoraphy utils
 */
export const generateFluidTypeUtils: () => GumFluidUtils = () => {
  const size = {};

  for (const key in typography) {
    if (typography.hasOwnProperty(key)) {
      const currentKey = key as GumTypescale;
      const nextKey = findNext(currentKey);

      if (!nextKey) break;

      if (currentKey === Object.keys(typography)[0]) continue;

      size[nextKey] = css`
        ${fontSize(currentKey, nextKey)};
        ${lineHeight(currentKey, nextKey)};
      `;
    }
  }

  return size as GumFluidUtils;
};