import { css } from '@emotion/react';
import { spacing } from '../../../../src/style/variables';
import { Prefix } from '../constants';
import { getVarValue } from '../helpers';
import { GumSpacings } from '../models';

/**
 * Generates CSS fragments for padding or margin based on variables.ts config
 * @param type Spacing type - "padding" or "margin"
 */
export const generateSpacingValues = (type: 'padding' | 'margin') => {
  const spacingValues = {
    none: css`
      ${`${type}: 0;`}
    `,
  } as GumSpacings;

  for (const key in spacing) {
    spacingValues[key] = css`
      ${`${type}: ${getVarValue(Prefix.spacing, key)};`}
    `;
  }

  spacingValues['top'] = {
    none: css`
      ${`${type}-top: 0;`}
    `,
  } as GumSpacings;
  spacingValues['bottom'] = {
    none: css`
      ${`${type}-bottom: 0;`}
    `,
  } as GumSpacings;
  spacingValues['left'] = {
    none: css`
      ${`${type}-left: 0;`}
    `,
  } as GumSpacings;
  spacingValues['right'] = {
    none: css`
      ${`${type}-right: 0;`}
    `,
  } as GumSpacings;

  for (const key in spacing) {
    spacingValues['top'][key] = css`
      ${`${type}-top: ${getVarValue(Prefix.spacing, key)};`}
    `;

    spacingValues['bottom'][key] = css`
      ${`${type}-bottom: ${getVarValue(Prefix.spacing, key)};`}
    `;

    spacingValues['left'][key] = css`
      ${`${type}-left: ${getVarValue(Prefix.spacing, key)};`}
    `;

    spacingValues['right'][key] = css`
      ${`${type}-right: ${getVarValue(Prefix.spacing, key)};`}
    `;
  }

  return spacingValues;
};