// @flow
import { getStackedRules } from './stacking.css-rules';
import type { StackedProps } from './stacking.proptypes';

describe('stacking', () => {
  describe('getStackedRules - non-responsive options', () => {
    it('does not produce rules if not stacked', () => {
      const rules = getStackedRules({});
      expect(rules).toEqual('');
    });

    it('sets flex direction based on how it is stacked', () => {
      const rules = getStackedRules({ stacked: 'column' });
      expect(rules).toContain('flex-direction: column;');
    });

    describe('justify', () => {
      it('sets default justify', () => {
        const rules = getStackedRules({ stacked: 'row' });
        expect(rules).toContain(`justify-content: flex-start;`);
      });

      it('sets `justifyContent` based on justify value', () => {
        const rules = getStackedRules({ stacked: 'row', justify: 'end' });
        expect(rules).toContain(`justify-content: flex-end;`);
      });
    });

    describe('align', () => {
      it('sets default align', () => {
        const rules = getStackedRules({ stacked: 'row' });
        expect(rules).toContain('align-items: stretch;');
      });

      it('sets `alignItems` based on align value', () => {
        const rules = getStackedRules({ stacked: 'row', align: 'end' });
        expect(rules).toContain('align-items: flex-end;');
      });
    });
  });

  describe('getStackedRules - responsive options', () => {
    describe('small bp', () => {
      it('sets stacking rules with a small-bp media query', () => {
        const rules = getStackedRules({
          stacked: { sm: 'column' },
          align: { sm: 'center' },
          justify: { sm: 'space-between' },
        });
        expect(rules).toContain(
          '@media (max-width: 768px) {' +
            'display: flex; ' +
            'flex-direction: column; ' +
            'justify-content: space-between; ' +
            'align-items: center;' +
            '}',
        );
      });
    });

    describe('medium bp', () => {
      it('sets stacking rules with a medium-bp media query', () => {
        const rules = getStackedRules({
          stacked: { md: 'column' },
          align: { md: 'center' },
          justify: { md: 'space-between' },
        });
        expect(rules).toContain(
          '@media (min-width: 768px) {' +
            'display: flex; ' +
            'flex-direction: column; ' +
            'justify-content: space-between; ' +
            'align-items: center;' +
            '}',
        );
      });
    });

    describe('large bp', () => {
      it('sets stacking rules with a large-bp media query', () => {
        const rules = getStackedRules({
          stacked: { lg: 'column' },
          align: { lg: 'center' },
          justify: { lg: 'space-between' },
        });
        expect(rules).toContain(
          '@media (min-width: 1024px) {' +
            'display: flex; ' +
            'flex-direction: column; ' +
            'justify-content: space-between; ' +
            'align-items: center;' +
            '}',
        );
      });
    });

    describe('extra large bp', () => {
      it('sets stacking rules with a extra-large-bp media query', () => {
        const props: StackedProps = {
          stacked: { xl: 'column' },
          align: { xl: 'center' },
          justify: { xl: 'space-between' },
        };
        const rules = getStackedRules(props);
        expect(rules).toContain(
          '@media (min-width: 1280px) {' +
            'display: flex; ' +
            'flex-direction: column; ' +
            'justify-content: space-between; ' +
            'align-items: center;' +
            '}',
        );
      });
    });
  });
});
