import { getDefaultThemeSettings, tokenize } from '../defaults.tokens';
import {
  getLookupTableForCurrentThemePalettes,
  getLookupTableForThisApp,
  Theme
} from '../Theme';
import {
  getCssWithThemedTokens,
  getIdForTokenFromValue,
  getPaletteInfoFromReferenceKey,
  getPaletteInfoFromStringKey,
  getTokenInfoFromReferenceKey,
  getTokenInfoFromStringKey,
  getValueFromReference,
  getValueFromReferenceString,
  isColorReferenceString,
  isValidTokenKey,
  isValidTokenType
} from './theme.utils';
import { ApphousePaletteModeOptions } from '../../constants/constants';
import { getDefaultColors } from '../Color';
import { StyleUtils } from '../../utils/style.utils';
import { THEMES } from '../presets';
import {
  COLOR,
  CssPropertyStyle,
  StyleTokenReference,
  TOKEN
} from '../style.interface';
import { tokenTypes } from '../token.interface';

jest.mock('./color.utils', () => {
  const originalModule = jest.requireActual('./color.utils');

  //Mock the default export and named export 'foo'
  return {
    __esModule: true,
    ...originalModule,
    // default: jest.fn(() => "mocked setAlpha"),
    setAlpha: () => 'rgba(0,0,0,1)',
    fromColorStringToRgbaObject: () => ({ r: 0, g: 0, b: 0, a: 0 }),
    getStringRgbaColor: () => 'rgba(0,0,0,1)'
  };
});

const backgroundColorStyleProperty: CssPropertyStyle = {
  property: 'backgroundColor',
  value: 'theme.surface',
  isSelector: false,
  reference: {
    type: 'color',
    value: 'black',
    key: 'theme.surface'
  }
};

const paddingStyleProperty: CssPropertyStyle = {
  property: 'padding',
  value: 'spacings.xs',
  isSelector: false,
  reference: {
    type: 'token',
    value: '2px',
    key: 'spacings.xs'
  }
};

const colorStyleProperty: CssPropertyStyle = {
  property: 'color',
  value: 'rgba(0,0,0,0.5)',
  isSelector: false,
  reference: null
};

const defaultThemeSettings = getDefaultThemeSettings('dark');
export const SampleTestTheme = new Theme({
  id: 'test-theme',
  title: 'Test theme',
  colors: [
    {
      title: 'Base',
      id: 'base',
      description: 'Base colors',
      mode: 'base',
      colors: getDefaultColors(ApphousePaletteModeOptions.base)
    },
    {
      title: 'Dark',
      id: 'dark',
      description: 'Dark theme colors',
      mode: 'theme',
      colors: getDefaultColors(ApphousePaletteModeOptions.dark)
    },
    {
      title: 'Light',
      id: 'light',
      description: 'Light theme colors',
      mode: 'theme',
      colors: getDefaultColors(ApphousePaletteModeOptions.light)
    }
  ],
  tokens: Object.keys(defaultThemeSettings.tokens).map(
    (key) => defaultThemeSettings.tokens[key]
  ),
  styles: Object.keys(defaultThemeSettings.styles).map(
    (key) => defaultThemeSettings.styles[key]
  )
});

describe('theme utils', () => {
  test('should return css with raw values from token when there are selectors', () => {
    const cssStylesWithTokens = {
      backgroundColor: 'theme.background',
      padding: 'spacings.xs',
      color: 'theme.onBackground',
      ':hover': {
        backgroundColor: 'theme.background',
        padding: 'spacings.xs',
        color: 'theme.onBackground'
      }
    };
    const lookup = {
      'theme.background': 'green',
      'theme.dark.background': 'black',
      'theme.surface': 'black',
      'spacings.xs': '2px',
      'theme.onSurface': 'white'
    };
    const ts = StyleUtils.toCssPropertyStyle(cssStylesWithTokens, lookup);

    const themeColor = 'dark';
    let css = getCssWithThemedTokens({
      value: ts,
      lookup,
      withColorsFromPaletteId: themeColor as any,
      withRawValue: true
    });

    expect(css).toEqual({
      ':hover': {
        backgroundColor: 'black',
        padding: '2px',
        color: 'theme.onBackground'
      },
      backgroundColor: 'black',
      color: 'theme.onBackground',
      padding: '2px'
    });

    css = getCssWithThemedTokens({
      value: ts,
      lookup,
      withColorsFromPaletteId: themeColor as any,
      withRawValue: false
    });

    expect(css).toEqual({
      ':hover': {
        backgroundColor: 'green',
        padding: '2px',
        color: 'theme.onBackground'
      },
      backgroundColor: 'green',
      color: 'theme.onBackground',
      padding: '2px'
    });
  });
  describe('getCssWithThemedTokens', () => {
    test('should return css with value strings', () => {
      const lookup = {
        'theme.surface': 'black',
        'spacings.xs': '2px'
      };

      // const ts = convertObjectToStyleProperty(cssStylesWithTokens, lookup);
      const themeColor = 'dark';
      const css = getCssWithThemedTokens({
        value: [
          backgroundColorStyleProperty,
          paddingStyleProperty,
          colorStyleProperty
        ],
        lookup,
        withColorsFromPaletteId: themeColor as any
      });

      expect(css).toEqual({
        backgroundColor: 'theme.surface',
        padding: 'spacings.xs',
        color: 'rgba(0,0,0,0.5)'
      });
    });
    test('should return css with token keys strings', () => {
      const lookup = {
        'theme.surface': 'black',
        'spacings.xs': '2px',
        'theme.onSurface': 'white'
      };

      const themeColor = 'dark';
      const css = getCssWithThemedTokens({
        value: [
          backgroundColorStyleProperty,
          paddingStyleProperty,
          colorStyleProperty
        ],
        lookup,
        withColorsFromPaletteId: themeColor as any
      });

      const themeColors = SampleTestTheme.palette[themeColor].colors;

      expect(themeColors).toHaveProperty('surface');
      expect(css).toEqual({
        backgroundColor: 'theme.surface',
        padding: 'spacings.xs',
        color: 'rgba(0,0,0,0.5)'
      });
    });

    test('should return css with raw values from token when theme is provided', () => {
      const cssStylesWithTokens = {
        backgroundColor: 'theme.surface',
        padding: 'spacings.xs',
        color: 'theme.onSurface'
      };
      const lookup = {
        'theme.dark.surface': 'black',
        'spacings.xs': '2px',
        'theme.dark.onSurface': 'white'
      };
      const ts = StyleUtils.toCssPropertyStyle(cssStylesWithTokens, lookup);

      const themeColor = 'dark';
      const css = getCssWithThemedTokens({
        value: ts,
        lookup,
        withColorsFromPaletteId: themeColor as any,
        withRawValue: true
      });

      expect(css).toEqual({
        backgroundColor: 'black',
        color: 'white',
        padding: '2px'
      });
    });
  });
  describe('getPaletteInfoFromStringKey', () => {
    test('should get palette info from string', () => {
      let info = getPaletteInfoFromStringKey('base.primary.surface');
      expect(info).toEqual({
        paletteId: 'primary',
        paletteMode: 'base',
        colorId: 'surface'
      });

      info = getPaletteInfoFromStringKey('theme.surface', 'light');
      expect(info).toEqual({
        paletteId: 'light',
        paletteMode: 'light',
        colorId: 'surface'
      });

      info = getPaletteInfoFromStringKey('theme.surface', 'dark');
      expect(info).toEqual({
        paletteId: 'dark',
        paletteMode: 'dark',
        colorId: 'surface'
      });
    });
  });
  describe('getPaletteInfoFromReferenceKey', () => {
    test('should return palette info if reference is of type palette', () => {
      const tokenRef: StyleTokenReference = {
        type: COLOR,
        key: 'base.primary.surface',
        value: {
          hex: ''
        }
      };
      const info = getPaletteInfoFromReferenceKey(tokenRef);
      expect(info).toEqual({
        paletteId: 'primary',
        paletteMode: 'base',
        colorId: 'surface'
      });
    });

    test('should return undefined if reference is not of type palette', () => {
      const tokenRef: StyleTokenReference = {
        type: TOKEN,
        key: 'backgroundColors.surface',
        value: {
          hex: ''
        }
      };
      const info = getPaletteInfoFromReferenceKey(tokenRef);
      expect(info).toEqual(undefined);
    });

    test('should return if normalized reference for themed colors', () => {
      const tokenRef: StyleTokenReference = {
        type: COLOR,
        key: 'theme.surface',
        value: {
          hex: ''
        }
      };
      let info = getPaletteInfoFromReferenceKey(tokenRef, 'dark');
      expect(info).toEqual({
        paletteId: 'dark',
        paletteMode: 'dark',
        colorId: 'surface'
      });

      info = getPaletteInfoFromReferenceKey(tokenRef, 'light');
      expect(info).toEqual({
        paletteId: 'light',
        paletteMode: 'light',
        colorId: 'surface'
      });
    });
  });
  describe('isValidTokenType', () => {
    test('should return false if invalid', () => {
      const tokenType = isValidTokenType('spacing');
      expect(tokenType).toEqual(false);
    });
    test('should return true if valid', () => {
      tokenTypes.forEach((type) => {
        const tokenType = isValidTokenType(type);
        expect(tokenType).toEqual(true);
      });
    });
  });
  describe('isValidTokenKey', () => {
    test('should return false if invalid', () => {
      const isValid = isValidTokenKey('0');
      expect(isValid).toEqual(false);
    });
    test('should return true if valid', () => {
      let isValid = isValidTokenKey('spacings.xs');
      expect(isValid).toEqual(true);

      isValid = isValidTokenKey('theme.background');
      expect(isValid).toEqual(true);

      isValid = isValidTokenKey('base.primary.background');
      expect(isValid).toEqual(true);

      isValid = isValidTokenKey('dark.dark.background');
      expect(isValid).toEqual(true);
    });
  });
  describe('getTokenInfoFromReferenceKey', () => {
    test('should return token reference info', () => {
      const tokenRef: StyleTokenReference = {
        type: TOKEN,
        key: 'spacings.xs',
        value: 30
      };
      const info = getTokenInfoFromReferenceKey(tokenRef);
      expect(info).toEqual({
        tokenType: 'spacings',
        tokenKey: 'xs',
        tokenId: tokenRef.key
      });
    });

    test('should return undefined if token is not of type TOKEN', () => {
      const tokenRef: StyleTokenReference = {
        type: COLOR,
        key: 'theme.background',
        value: {
          hex: ''
        }
      };
      const info = getTokenInfoFromReferenceKey(tokenRef);
      expect(info).toEqual(undefined);
    });
  });
  describe('getTokenInfoFromStringKey', () => {
    test('should return token reference info', () => {
      const info = getTokenInfoFromStringKey('spacings.xs');
      expect(info).toEqual({
        tokenType: 'spacings',
        tokenKey: 'xs',
        tokenId: `spacings.xs`
      });
    });

    test('should return undefined if token is not of type TOKEN', () => {
      const info = getTokenInfoFromStringKey('base.primary.background');
      expect(info).toEqual(undefined);
    });

    test('should return undefined if token is not of type TOKEN or COLOR', () => {
      const info = getTokenInfoFromStringKey('rgba(0,0,0,0.5)');
      expect(info).toEqual(undefined);
    });

    test('should return undefined if token value is a floating number starting with 0', () => {
      const info = getTokenInfoFromStringKey('0.5');
      expect(info).toEqual(undefined);
    });
  });
  describe('getIdForTokenFromValue', () => {
    test('should return id for token', () => {
      const tokenType = 'spacings';
      const tokenKey = 'xs';
      let id = getIdForTokenFromValue(tokenType, tokenKey);
      expect(id).toEqual(`${tokenType}.${tokenKey}`);

      id = getIdForTokenFromValue('spacings', 'large');
      expect(id).toEqual('spacings.large');

      id = getIdForTokenFromValue('spacing', 'large');
      expect(id).toEqual(undefined);
    });
  });
  describe('getValueFromReferenceString', () => {
    test('should return reference value for token', () => {
      const colors = SampleTestTheme.palette;
      const tokens = SampleTestTheme.tokens;
      const themeColor = 'dark' as any;
      const withRaw = true;

      const value = getValueFromReferenceString({
        referenceString: 'theme.primary',
        colors,
        tokens,
        theme: themeColor,
        withRaw
      });
      expect(value).toEqual('theme.primary');
    });

    test('should not parse rgba string when trying to find reference value', () => {
      const colors = SampleTestTheme.palette;
      const tokens = SampleTestTheme.tokens;
      const themeColor = 'dark' as any;
      const withRaw = true;

      const value = getValueFromReferenceString({
        referenceString: 'rgba(0, 0, 0, 0.5)',
        colors,
        tokens,
        theme: themeColor,
        withRaw
      });
      expect(value).toEqual('rgba(0, 0, 0, 0.5)');
    });

    test('should return string key reference value for token when with raw value is false', () => {
      const colors = SampleTestTheme.palette;
      const tokens = SampleTestTheme.tokens;
      const themeColor = 'dark' as any;

      const value = getValueFromReferenceString({
        referenceString: 'theme.background',
        colors,
        tokens,
        theme: themeColor,
        withRaw: false
      });
      expect(value).toEqual('theme.background');
    });

    test('should return token value from reference', () => {
      const colors = SampleTestTheme.palette;
      const tokens = SampleTestTheme.tokens;

      const value = getValueFromReferenceString({
        referenceString: 'spacings.xs',
        colors,
        tokens,
        withRaw: false
      });
      expect(value).toEqual('spacings.xs');
    });

    test('should return raw value from reference string token', () => {
      const colors = SampleTestTheme.palette;
      const tokens = SampleTestTheme.tokens;

      const value = getValueFromReferenceString({
        referenceString: 'spacings.xs',
        colors,
        tokens,
        withRaw: true
      });
      const t = tokens['spacings.xs'];
      expect(value).toBeDefined();
      expect(value).toEqual(t?.value);
    });

    test('isColorReferenceString', () => {
      let isColorReference = isColorReferenceString('theme.background');
      expect(isColorReference).toEqual(true);

      isColorReference = isColorReferenceString('base.primary.background');
      expect(isColorReference).toEqual(true);

      isColorReference = isColorReferenceString('spacings.xs');
      expect(isColorReference).toEqual(false);

      isColorReference = isColorReferenceString('0');
      expect(isColorReference).toEqual(false);

      isColorReference = isColorReferenceString('rgba(0,0,0,0.75)');
      expect(isColorReference).toEqual(false);
      isColorReference = isColorReferenceString('r.g.ba(0,0,0,0.75)');
      expect(isColorReference).toEqual(false);
    });
  });
  describe('getValueFromReference', () => {
    test('should return reference value for Palette reference', () => {
      const reference: StyleTokenReference = {
        type: COLOR,
        value: 'rgba(0,0,0,0)',
        key: 'theme.surface'
      };

      const lookup = getLookupTableForThisApp();
      const themeColor = 'dark' as any;
      const withRaw = true;

      const value = getValueFromReference({
        reference,
        lookup,
        theme: themeColor,
        withRaw
      });

      expect(value).toEqual('theme.surface');
    });

    test('should return reference value for Token reference', () => {
      const reference: StyleTokenReference = {
        type: TOKEN,
        value: '8',
        key: 'spacings.l'
      };
      const lookup = getLookupTableForThisApp();
      const themeColor = 'dark' as any;
      const withRaw = true;

      const value = getValueFromReference({
        reference,
        lookup,
        theme: themeColor,
        withRaw
      });

      expect(value).toEqual(20);
    });
  });
});

describe('tokenize', () => {
  test('properly convert this App DesginTokens to Record<string, Token>', () => {
    const tokens = tokenize(THEMES.APPHOUSE_DARK.tokens);
    expect(tokens).toEqual({
      'borderWidth.default': {
        key: 'default',
        reference: undefined,
        type: 'borderWidth',
        value: '2px'
      },
      'borderWidth.none': {
        key: 'none',
        reference: undefined,
        type: 'borderWidth',
        value: 0
      },
      'borderWidth.thin': {
        key: 'thin',
        reference: undefined,
        type: 'borderWidth',
        value: '1px'
      },
      'fontFamily.default': {
        key: 'default',
        reference: undefined,
        type: 'fontFamily',
        value:
          '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif'
      },
      'fontFamily.heading': {
        key: 'heading',
        reference: undefined,
        type: 'fontFamily',
        value:
          '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif'
      },
      'fontFamily.monospace': {
        key: 'monospace',
        reference: undefined,
        type: 'fontFamily',
        value: 'monospace'
      },
      'fontFamily.text': {
        key: 'text',
        reference: undefined,
        type: 'fontFamily',
        value:
          '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif'
      },
      'fontSize.caption': {
        key: 'caption',
        reference: undefined,
        type: 'fontSize',
        value: '10px'
      },
      'fontSize.header': {
        key: 'header',
        reference: undefined,
        type: 'fontSize',
        value: '32px'
      },
      'fontSize.standard': {
        key: 'standard',
        reference: undefined,
        type: 'fontSize',
        value: '13px'
      },
      'fontSize.standardLarge': {
        key: 'standardLarge',
        reference: undefined,
        type: 'fontSize',
        value: '15px'
      },
      'fontSize.standardSmall': {
        key: 'standardSmall',
        reference: undefined,
        type: 'fontSize',
        value: '11px'
      },
      'fontSize.subheader': {
        key: 'subheader',
        reference: undefined,
        type: 'fontSize',
        value: '26px'
      },
      'fontSize.subtitle': {
        key: 'subtitle',
        reference: undefined,
        type: 'fontSize',
        value: '16px'
      },
      'fontSize.title': {
        key: 'title',
        reference: undefined,
        type: 'fontSize',
        value: '18px'
      },
      'fontWeight.bold': {
        key: 'bold',
        reference: undefined,
        type: 'fontWeight',
        value: 600
      },
      'fontWeight.bolder': {
        key: 'bolder',
        reference: undefined,
        type: 'fontWeight',
        value: 700
      },
      'fontWeight.light': {
        key: 'light',
        reference: undefined,
        type: 'fontWeight',
        value: 300
      },
      'fontWeight.standard': {
        key: 'standard',
        reference: undefined,
        type: 'fontWeight',
        value: 500
      },
      'iconSize.l': {
        key: 'l',
        reference: undefined,
        type: 'iconSize',
        value: 30
      },
      'iconSize.m': {
        key: 'm',
        reference: undefined,
        type: 'iconSize',
        value: 24
      },
      'iconSize.s': {
        key: 's',
        reference: undefined,
        type: 'iconSize',
        value: 12
      },
      'iconSize.standard': {
        key: 'standard',
        reference: undefined,
        type: 'iconSize',
        value: 16
      },
      'mediaQuery.l': {
        key: 'l',
        reference: undefined,
        type: 'mediaQuery',
        value:
          '@media only screen and (min-width: 1280px) and (max-width: 1919px)'
      },
      'mediaQuery.m': {
        key: 'm',
        reference: undefined,
        type: 'mediaQuery',
        value:
          '@media only screen and (min-width: 960px) and (max-width: 1279px)'
      },
      'mediaQuery.s': {
        key: 's',
        reference: undefined,
        type: 'mediaQuery',
        value:
          '@media only screen and (min-width: 600px) and (max-width: 959px)'
      },
      'mediaQuery.xl': {
        key: 'xl',
        reference: undefined,
        type: 'mediaQuery',
        value: '@media only screen and (min-width: 1920px)'
      },
      'mediaQuery.xs': {
        key: 'xs',
        reference: undefined,
        type: 'mediaQuery',
        value: '@media only screen and (max-width: 599px)'
      },
      'radius.circle': {
        key: 'circle',
        reference: undefined,
        type: 'radius',
        value: '50%'
      },
      'radius.default': {
        key: 'default',
        reference: undefined,
        type: 'radius',
        value: '6px'
      },
      'radius.l': {
        key: 'l',
        reference: undefined,
        type: 'radius',
        value: '12px'
      },
      'radius.m': {
        key: 'm',
        reference: undefined,
        type: 'radius',
        value: '8px'
      },
      'radius.s': {
        key: 's',
        reference: undefined,
        type: 'radius',
        value: '4px'
      },
      'spacings.default': {
        key: 'default',
        reference: undefined,
        type: 'spacings',
        value: 8
      },
      'spacings.l': {
        key: 'l',
        reference: undefined,
        type: 'spacings',
        value: 20
      },
      'spacings.m': {
        key: 'm',
        reference: undefined,
        type: 'spacings',
        value: 14
      },
      'spacings.r': {
        key: 'r',
        reference: undefined,
        type: 'spacings',
        value: 10
      },
      'spacings.s': {
        key: 's',
        reference: undefined,
        type: 'spacings',
        value: 4
      },
      'spacings.xl': {
        key: 'xl',
        reference: undefined,
        type: 'spacings',
        value: 30
      },
      'spacings.xs': {
        key: 'xs',
        reference: undefined,
        type: 'spacings',
        value: 2
      },
      'zIndex.default': {
        key: 'default',
        reference: undefined,
        type: 'zIndex',
        value: 1
      },
      'zIndex.menu': {
        key: 'menu',
        reference: undefined,
        type: 'zIndex',
        value: 400
      },
      'zIndex.overlay': {
        key: 'overlay',
        reference: undefined,
        type: 'zIndex',
        value: 1000
      },
      'zIndex.panel': {
        key: 'panel',
        reference: undefined,
        type: 'zIndex',
        value: 0
      },
      'zIndex.popup': {
        key: 'popup',
        reference: undefined,
        type: 'zIndex',
        value: 5000
      },
      'zIndex.toast': {
        key: 'toast',
        reference: undefined,
        type: 'zIndex',
        value: 300
      }
    });
  });
});

describe('lookup', () => {
  test('getLookupTableForThisApp', () => {
    const lookup = getLookupTableForThisApp();
    expect(lookup).toEqual({
      'base.BLACK': 'rgba(0,0,0,1)',
      'base.GREEN': 'rgba(0,0,0,1)',
      'base.GREY': 'rgba(0,0,0,1)',
      'base.GREY_ALT': 'rgba(0,0,0,1)',
      'base.GREY_ALT_50': 'rgba(0,0,0,1)',
      'base.GREY_ALT_75': 'rgba(0,0,0,1)',
      'base.LIGHT_BLUE': 'rgba(0,0,0,1)',
      'base.LIGHT_GRAY': 'rgba(0,0,0,1)',
      'base.MONTANA': 'rgba(0,0,0,1)',
      'base.NERO': 'rgba(0,0,0,1)',
      'base.PURE_BLACK': 'rgba(0,0,0,1)',
      'base.PURE_WHITE': 'rgba(0,0,0,1)',
      'base.RED': 'rgba(0,0,0,1)',
      'base.WHITE': 'rgba(0,0,0,1)',
      'base.WHITEISH': 'rgba(0,0,0,1)',
      'base.YELLOW': 'rgba(0,0,0,1)',
      'borderWidth.default': '2px',
      'borderWidth.none': 0,
      'borderWidth.thin': '1px',
      'fontFamily.default':
        '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, tarell, Open Sans, Helvetica, sans-serif',
      'fontFamily.heading':
        '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, tarell, Open Sans, Helvetica, sans-serif',
      'fontFamily.monospace': 'monospace',
      'fontFamily.text':
        '-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, n Sans, Helvetica, sans-serif',
      'fontSize.caption': '10px',
      'fontSize.header': '32px',
      'fontSize.standard': '13px',
      'fontSize.standardLarge': '15px',
      'fontSize.standardSmall': '11px',
      'fontSize.subheader': '26px',
      'fontSize.subtitle': '16px',
      'fontSize.title': '18px',
      'fontWeight.bold': 600,
      'fontWeight.bolder': 700,
      'fontWeight.light': 300,
      'fontWeight.standard': 500,
      'iconSize.l': 30,
      'iconSize.m': 24,
      'iconSize.s': 12,
      'iconSize.standard': 16,
      'mediaQuery.l':
        '@media only screen and (min-width: 1280px) and (max-width: 1919px)',
      'mediaQuery.m':
        '@media only screen and (min-width: 960px) and (max-width: 1279px)',
      'mediaQuery.s':
        '@media only screen and (min-width: 600px) and (max-width: 959px)',
      'mediaQuery.xl': '@media only screen and (min-width: 1920px)',
      'mediaQuery.xs': '@media only screen and (max-width: 599px)',
      'radius.circle': '50%',
      'radius.default': '6px',
      'radius.l': '12px',
      'radius.m': '8px',
      'radius.s': '4px',
      'spacings.default': 8,
      'spacings.l': 20,
      'spacings.m': 14,
      'spacings.r': 10,
      'spacings.s': 4,
      'spacings.xl': 30,
      'spacings.xs': 2,
      'theme.dark.borderOnPrimary': 'rgba(0,0,0,1)',
      'theme.dark.borderOnPrimaryInverse': 'rgba(0,0,0,1)',
      'theme.dark.borderOnSurface': 'rgba(0,0,0,1)',
      'theme.dark.borderOnSurface10': 'rgba(0,0,0,1)',
      'theme.dark.brand': 'rgba(0,0,0,1)',
      'theme.dark.brandAlt': 'rgba(0,0,0,1)',
      'theme.dark.error': 'rgba(0,0,0,1)',
      'theme.dark.focusRingInset': 'rgba(0,0,0,1)',
      'theme.dark.focusRingOutline': 'rgba(0,0,0,1)',
      'theme.dark.info': 'rgba(0,0,0,1)',
      'theme.dark.onBrand': 'rgba(0,0,0,1)',
      'theme.dark.onError': 'rgba(0,0,0,1)',
      'theme.dark.onInfo': 'rgba(0,0,0,1)',
      'theme.dark.onPrimary': 'rgba(0,0,0,1)',
      'theme.dark.onPrimaryInverse': 'rgba(0,0,0,1)',
      'theme.dark.onSelection': 'rgba(0,0,0,1)',
      'theme.dark.onSuccess': 'rgba(0,0,0,1)',
      'theme.dark.onSurface': 'rgba(0,0,0,1)',
      'theme.dark.onSurface10': 'rgba(0,0,0,1)',
      'theme.dark.onSurface20': 'rgba(0,0,0,1)',
      'theme.dark.onWarning': 'rgba(0,0,0,1)',
      'theme.dark.primary': 'rgba(0,0,0,1)',
      'theme.dark.primaryInverse': 'rgba(0,0,0,1)',
      'theme.dark.required': 'rgba(0,0,0,1)',
      'theme.dark.selection': 'rgba(0,0,0,1)',
      'theme.dark.success': 'rgba(0,0,0,1)',
      'theme.dark.surface': 'rgba(0,0,0,1)',
      'theme.dark.surface10': 'rgba(0,0,0,1)',
      'theme.dark.surface20': 'rgba(0,0,0,1)',
      'theme.dark.toggleOn': 'rgba(0,0,0,1)',
      'theme.dark.warning': 'rgba(0,0,0,1)',
      'theme.light.borderOnPrimary': 'rgba(0,0,0,1)',
      'theme.light.borderOnPrimaryInverse': 'rgba(0,0,0,1)',
      'theme.light.borderOnSurface': 'rgba(0,0,0,1)',
      'theme.light.borderOnSurface10': 'rgba(0,0,0,1)',
      'theme.light.brand': 'rgba(0,0,0,1)',
      'theme.light.brandAlt': 'rgba(0,0,0,1)',
      'theme.light.error': 'rgba(0,0,0,1)',
      'theme.light.focusRingInset': 'rgba(0,0,0,1)',
      'theme.light.focusRingOutline': 'rgba(0,0,0,1)',
      'theme.light.info': 'rgba(0,0,0,1)',
      'theme.light.onBrand': 'rgba(0,0,0,1)',
      'theme.light.onError': 'rgba(0,0,0,1)',
      'theme.light.onInfo': 'rgba(0,0,0,1)',
      'theme.light.onPrimary': 'rgba(0,0,0,1)',
      'theme.light.onPrimaryInverse': 'rgba(0,0,0,1)',
      'theme.light.onSelection': 'rgba(0,0,0,1)',
      'theme.light.onSuccess': 'rgba(0,0,0,1)',
      'theme.light.onSurface': 'rgba(0,0,0,1)',
      'theme.light.onSurface10': 'rgba(0,0,0,1)',
      'theme.light.onSurface20': 'rgba(0,0,0,1)',
      'theme.light.onWarning': 'rgba(0,0,0,1)',
      'theme.light.primary': 'rgba(0,0,0,1)',
      'theme.light.primaryInverse': 'rgba(0,0,0,1)',
      'theme.light.required': 'rgba(0,0,0,1)',
      'theme.light.selection': 'rgba(0,0,0,1)',
      'theme.light.success': 'rgba(0,0,0,1)',
      'theme.light.surface': 'rgba(0,0,0,1)',
      'theme.light.surface10': 'rgba(0,0,0,1)',
      'theme.light.surface20': 'rgba(0,0,0,1)',
      'theme.light.toggleOn': 'rgba(0,0,0,1)',
      'theme.light.warning': 'rgba(0,0,0,1)',
      'zIndex.default': 1,
      'zIndex.menu': 400,
      'zIndex.overlay': 1000,
      'zIndex.panel': 0,
      'zIndex.popup': 5000,
      'zIndex.toast': 300
    });
  });

  test('getLookupTableForCurrentThemePalettes', () => {
    const lookup = getLookupTableForCurrentThemePalettes(
      SampleTestTheme.palette
    );
    expect(lookup).toEqual({
      'base.BLACK': 'rgba(30, 28, 29, 1)',
      'base.GREEN': 'rgba(0, 179, 36, 1)',
      'base.GREY': 'rgba(75, 74, 74, 1)',
      'base.GREY_ALT': 'rgba(198, 198, 198, 1)',
      'base.GREY_ALT_50': 'rgba(45, 45, 45, 1)',
      'base.GREY_ALT_75': 'rgba(54, 51, 51, 1)',
      'base.LIGHT_BLUE': 'rgba(0, 113, 227, 1)',
      'base.LIGHT_GRAY': 'rgba(211, 211, 211, 1)',
      'base.MONTANA': 'rgba(57, 57, 59, 1)',
      'base.NERO': 'rgba(39, 38, 39, 1)',
      'base.PURE_BLACK': 'rgba(0, 0, 0, 1)',
      'base.PURE_WHITE': 'rgba(255, 255, 255, 1)',
      'base.RED': 'rgba(178, 0, 0, 1)',
      'base.WHITE': 'rgba(236, 236, 236, 1)',
      'base.WHITEISH': 'rgba(221, 221, 221, 1)',
      'base.YELLOW': 'rgba(255, 165, 0, 1)',
      'theme.dark.borderOnPrimary': 'rgba(0, 0, 0, 1)',
      'theme.dark.borderOnPrimaryInverse': 'rgba(75, 74, 74, 1)',
      'theme.dark.borderOnSurface': 'rgba(75, 74, 74, 1)',
      'theme.dark.borderOnSurface10': 'rgba(75, 74, 74, 1)',
      'theme.dark.brand': 'rgba(0, 113, 227, 1)',
      'theme.dark.brandAlt': 'rgba(0, 113, 227, 1)',
      'theme.dark.error': 'rgba(178, 0, 0, 1)',
      'theme.dark.focusRingInset': 'rgba(0, 0, 0, 1)',
      'theme.dark.focusRingOutline': 'rgba(255, 255, 255, 1)',
      'theme.dark.info': 'rgba(0, 113, 227, 1)',
      'theme.dark.onBrand': 'rgba(236, 236, 236, 1)',
      'theme.dark.onError': 'rgba(236, 236, 236, 1)',
      'theme.dark.onInfo': 'rgba(236, 236, 236, 1)',
      'theme.dark.onPrimary': 'rgba(236, 236, 236, 1)',
      'theme.dark.onPrimaryInverse': 'rgba(30, 28, 29, 1)',
      'theme.dark.onSelection': 'rgba(236, 236, 236, 1)',
      'theme.dark.onSuccess': 'rgba(30, 28, 29, 1)',
      'theme.dark.onSurface': 'rgba(236, 236, 236, 1)',
      'theme.dark.onSurface10': 'rgba(236, 236, 236, 1)',
      'theme.dark.onSurface20': 'rgba(236, 236, 236, 1)',
      'theme.dark.onWarning': 'rgba(30, 28, 29, 1)',
      'theme.dark.primary': 'rgba(30, 28, 29, 1)',
      'theme.dark.primaryInverse': 'rgba(236, 236, 236, 1)',
      'theme.dark.required': 'rgba(178, 0, 0, 1)',
      'theme.dark.selection': 'rgba(57, 57, 59, 1)',
      'theme.dark.success': 'rgba(0, 179, 36, 1)',
      'theme.dark.surface': 'rgba(39, 38, 39, 1)',
      'theme.dark.surface10': 'rgba(45, 45, 45, 1)',
      'theme.dark.surface20': 'rgba(54, 51, 51, 1)',
      'theme.dark.toggleOn': 'rgba(0, 113, 227, 1)',
      'theme.dark.warning': 'rgba(255, 165, 0, 1)',
      'theme.light.borderOnPrimary': 'rgba(198, 198, 198, 1)',
      'theme.light.borderOnPrimaryInverse': 'rgba(198, 198, 198, 1)',
      'theme.light.borderOnSurface': 'rgba(198, 198, 198, 1)',
      'theme.light.borderOnSurface10': 'rgba(198, 198, 198, 1)',
      'theme.light.brand': 'rgba(0, 113, 227, 1)',
      'theme.light.brandAlt': 'rgba(0, 113, 227, 1)',
      'theme.light.error': 'rgba(178, 0, 0, 1)',
      'theme.light.focusRingInset': 'rgba(255, 255, 255, 1)',
      'theme.light.focusRingOutline': 'rgba(0, 0, 0, 1)',
      'theme.light.info': 'rgba(0, 113, 227, 1)',
      'theme.light.onBrand': 'rgba(236, 236, 236, 1)',
      'theme.light.onError': 'rgba(236, 236, 236, 1)',
      'theme.light.onInfo': 'rgba(236, 236, 236, 1)',
      'theme.light.onPrimary': 'rgba(30, 28, 29, 1)',
      'theme.light.onPrimaryInverse': 'rgba(236, 236, 236, 1)',
      'theme.light.onSelection': 'rgba(30, 28, 29, 1)',
      'theme.light.onSuccess': 'rgba(30, 28, 29, 1)',
      'theme.light.onSurface': 'rgba(30, 28, 29, 1)',
      'theme.light.onSurface10': 'rgba(30, 28, 29, 1)',
      'theme.light.onSurface20': 'rgba(30, 28, 29, 1)',
      'theme.light.onWarning': 'rgba(30, 28, 29, 1)',
      'theme.light.primary': 'rgba(236, 236, 236, 1)',
      'theme.light.primaryInverse': 'rgba(30, 28, 29, 1)',
      'theme.light.required': 'rgba(178, 0, 0, 1)',
      'theme.light.selection': 'rgba(211, 211, 211, 1)',
      'theme.light.success': 'rgba(0, 179, 36, 1)',
      'theme.light.surface': 'rgba(221, 221, 221, 1)',
      'theme.light.surface10': 'rgba(221, 221, 221, 1)',
      'theme.light.surface20': 'rgba(221, 221, 221, 1)',
      'theme.light.toggleOn': 'rgba(0, 113, 227, 1)',
      'theme.light.warning': 'rgba(255, 165, 0, 1)'
    });
  });
});