// @flow
import { getSpacingRules } from './spacing.css-rules';

describe('getSpacingRules', () => {
  let mockTheme;

  beforeEach(() => {
    mockTheme = {
      spacing: {
        s1: '4px',
        s2: '8px',
        s3: '16px',
        s4: '32px',
        s5: '64px',
        s6: '128px',
        s7: '256px',
      },
      buttonBorderRadius: '3px',
      cardBorderRadius: '2px',
      colorPalette: {
        // Backgrounds
        white: '#ffffff',
        background: '#f9f8f7',

        // Greys
        'greyscale-black': '#403e3d',
        'greyscale-darker': '#73706e',
        'greyscale-dark': '#8c8a88',
        'greyscale-medium': '#bfbdbb',
        'greyscale-light': '#e6e4e3',

        // Brand colours - primary
        'brand-primary-base': '#fab131',
        'brand-primary-dark': '#efa618',
        'brand-primary-fg': '#e69d00',
        'brand-primary-bg': '#fff6e6',

        // Brand colours - secondary
        'brand-secondary-base': '#7cb7b6',
        'brand-secondary-dark': '#71adab',
        'brand-secondary-fg': '#377674',
        'brand-secondary-bg': '#e5f1f1',

        // Flash messages
        'error-fg': '#ed5a3f',
        'error-bg': '#ffebe6',
        'success-fg': '#377674',
        'success-bg': '#e5f1f1',
        'info-fg': '#e69d00',
        'info-bg': '#fff6e6',

        // Auxiliary colours
        'aux-1': '#568aa6',
        'aux-2': '#f4adab',
        'aux-3': '#cf3813',
        'aux-4': '#1e2c46',
      },
      fonts: {},
      typescale: {
        f0: '10pt',
        f1: '13pt',
        f2: '16pt',
        f3: '18pt',
        f4: '24pt',
        f5: '30pt',
        f6: '46pt',
        f7: '42pt',
        f8: '48pt',
      },
    };
  });

  describe('padding', () => {
    it('Applies left padding correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl0' })).toEqual({
        paddingLeft: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl1' })).toEqual({
        paddingLeft: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl2' })).toEqual({
        paddingLeft: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl3' })).toEqual({
        paddingLeft: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl4' })).toEqual({
        paddingLeft: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl5' })).toEqual({
        paddingLeft: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl6' })).toEqual({
        paddingLeft: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pl7' })).toEqual({
        paddingLeft: '256px',
      });
    });

    it('Applies right padding correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr0' })).toEqual({
        paddingRight: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr1' })).toEqual({
        paddingRight: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr2' })).toEqual({
        paddingRight: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr3' })).toEqual({
        paddingRight: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr4' })).toEqual({
        paddingRight: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr5' })).toEqual({
        paddingRight: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr6' })).toEqual({
        paddingRight: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pr7' })).toEqual({
        paddingRight: '256px',
      });
    });

    it('Applies top padding correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt0' })).toEqual({
        paddingTop: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt1' })).toEqual({
        paddingTop: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt2' })).toEqual({
        paddingTop: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt3' })).toEqual({
        paddingTop: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt4' })).toEqual({
        paddingTop: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt5' })).toEqual({
        paddingTop: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt6' })).toEqual({
        paddingTop: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pt7' })).toEqual({
        paddingTop: '256px',
      });
    });

    it('Applies bottom padding correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb0' })).toEqual({
        paddingBottom: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb1' })).toEqual({
        paddingBottom: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb2' })).toEqual({
        paddingBottom: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb3' })).toEqual({
        paddingBottom: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb4' })).toEqual({
        paddingBottom: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb5' })).toEqual({
        paddingBottom: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb6' })).toEqual({
        paddingBottom: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pb7' })).toEqual({
        paddingBottom: '256px',
      });
    });

    it('Applies horizontal padding correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph0' })).toEqual({
        paddingLeft: '0',
        paddingRight: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph1' })).toEqual({
        paddingLeft: '4px',
        paddingRight: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph2' })).toEqual({
        paddingLeft: '8px',
        paddingRight: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph3' })).toEqual({
        paddingLeft: '16px',
        paddingRight: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph4' })).toEqual({
        paddingLeft: '32px',
        paddingRight: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph5' })).toEqual({
        paddingLeft: '64px',
        paddingRight: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph6' })).toEqual({
        paddingLeft: '128px',
        paddingRight: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ph7' })).toEqual({
        paddingLeft: '256px',
        paddingRight: '256px',
      });
    });

    it('Applies vertical padding correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv0' })).toEqual({
        paddingTop: '0',
        paddingBottom: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv1' })).toEqual({
        paddingTop: '4px',
        paddingBottom: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv2' })).toEqual({
        paddingTop: '8px',
        paddingBottom: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv3' })).toEqual({
        paddingTop: '16px',
        paddingBottom: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv4' })).toEqual({
        paddingTop: '32px',
        paddingBottom: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv5' })).toEqual({
        paddingTop: '64px',
        paddingBottom: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv6' })).toEqual({
        paddingTop: '128px',
        paddingBottom: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'pv7' })).toEqual({
        paddingTop: '256px',
        paddingBottom: '256px',
      });
    });
  });

  describe('margins', () => {
    it('Applies left margin correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml0' })).toEqual({
        marginLeft: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml1' })).toEqual({
        marginLeft: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml2' })).toEqual({
        marginLeft: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml3' })).toEqual({
        marginLeft: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml4' })).toEqual({
        marginLeft: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml5' })).toEqual({
        marginLeft: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml6' })).toEqual({
        marginLeft: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'ml7' })).toEqual({
        marginLeft: '256px',
      });
    });

    it('Applies right margin correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr0' })).toEqual({
        marginRight: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr1' })).toEqual({
        marginRight: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr2' })).toEqual({
        marginRight: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr3' })).toEqual({
        marginRight: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr4' })).toEqual({
        marginRight: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr5' })).toEqual({
        marginRight: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr6' })).toEqual({
        marginRight: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mr7' })).toEqual({
        marginRight: '256px',
      });
    });

    it('Applies top margin correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt0' })).toEqual({
        marginTop: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt1' })).toEqual({
        marginTop: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt2' })).toEqual({
        marginTop: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt3' })).toEqual({
        marginTop: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt4' })).toEqual({
        marginTop: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt5' })).toEqual({
        marginTop: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt6' })).toEqual({
        marginTop: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mt7' })).toEqual({
        marginTop: '256px',
      });
    });

    it('Applies bottom margin correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb0' })).toEqual({
        marginBottom: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb1' })).toEqual({
        marginBottom: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb2' })).toEqual({
        marginBottom: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb3' })).toEqual({
        marginBottom: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb4' })).toEqual({
        marginBottom: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb5' })).toEqual({
        marginBottom: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb6' })).toEqual({
        marginBottom: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mb7' })).toEqual({
        marginBottom: '256px',
      });
    });

    it('Applies horizontal margin correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh0' })).toEqual({
        marginLeft: '0',
        marginRight: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh1' })).toEqual({
        marginLeft: '4px',
        marginRight: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh2' })).toEqual({
        marginLeft: '8px',
        marginRight: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh3' })).toEqual({
        marginLeft: '16px',
        marginRight: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh4' })).toEqual({
        marginLeft: '32px',
        marginRight: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh5' })).toEqual({
        marginLeft: '64px',
        marginRight: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh6' })).toEqual({
        marginLeft: '128px',
        marginRight: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mh7' })).toEqual({
        marginLeft: '256px',
        marginRight: '256px',
      });
    });

    it('Applies vertical margin correctly', () => {
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv0' })).toEqual({
        marginTop: '0',
        marginBottom: '0',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv1' })).toEqual({
        marginTop: '4px',
        marginBottom: '4px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv2' })).toEqual({
        marginTop: '8px',
        marginBottom: '8px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv3' })).toEqual({
        marginTop: '16px',
        marginBottom: '16px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv4' })).toEqual({
        marginTop: '32px',
        marginBottom: '32px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv5' })).toEqual({
        marginTop: '64px',
        marginBottom: '64px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv6' })).toEqual({
        marginTop: '128px',
        marginBottom: '128px',
      });
      expect(getSpacingRules({ theme: mockTheme, spacing: 'mv7' })).toEqual({
        marginTop: '256px',
        marginBottom: '256px',
      });
    });
  });
});
